Xin giúp đỡ về requestAnimFrame

#1

Chào mọi người, mình đang tìm hiểu về JS.Hôm nay lại có vấn đề này mong được mọi người giúp đỡ. Mình có đoạn Code dưới đây:
https://codepen.io/trananh/pen/wPRovQ

Trong đó, mình mới đọc đoạn đầu tiên trong Code liên quan đến requestAnimFrame mà thấy rối quá:

window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(callback,element){
                window.setTimeout(callback, 1000 / 60);
              };
})();

Theo mình hiểu thì câu lệnh window.requestAnimFrame dùng để thông báo cho trình duyệt biết bạn muốn thực hiện hoạt cảnh và yêu cầu trình duyệt gọi hàm đã chỉ định , nhưng mà tại sao bên dưới lại lặp lại window.requestAnimFrame một lần nữa là sao ?

Đoạn lệnh này:

window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     ||

Là để kiểm tra với các trình duyệt khác nhau mình hiểu rồi nên mọi người có thể bỏ qua chỗ này.

Còn lại những chỗ bên dưới thì thực sự mình vẫn chưa hiểu được gì cả.

Mình đã cố gắng search từ khóa trên với Google để tham khảo nhưng vì trình độ tiếng anh quá kém nên đọc không hiểu được gì nhiều.

Vậy mong mọi người giải thích giùm mình với ạ. Mình xin cảm ơn.

#2

Nó có lặp lại đâu.
Một cái là Anim, cái kia là Animation
Mục đích viết hàm này là để gói toàn bộ api của các trình duyệt khác nhau vào một chỗ để xử lí thôi.

3 Likes
#3

Vâng, cám ơn bạn, đúng là hai cái khác nhau, thật xin lỗi do mình nhìn không kỹ.

Nhưng bạn có thể giải thích thêm cho mình một số chỗ bên dưới nữa được không.

              function(callback,element){
                window.setTimeout(callback, 1000 / 60);
              }

Bạn giúp mình hiểu rõ hơn một số khái niệm với, đại loại ví dụ như:

callback : là gì ? element là gì, tại sao ở dòng trên có callback rồi mà dòng dưới lại phải viết lại lần nữa.

Và bạn có giải thích :

Vậy có phải cứ bài nào sử dụng animation là phải chèn thêm đoạn code đó vô không hay tùy trường hợp mình mới dùng đến nó .

#4

Cách hoạt động window.requestAnimationFrame tương tự như setInterval() nhưng mượt hơn, thích hợp xử lý graphic và animation. Hàm được gọi mỗi khi UI rerender, tự động dừng khi qua tab khác, và tự hoạt động trở lại khi chuyển về tab cũ.

setInterval() thì thực hiện giống như timer. Tới thời điểm kích hoạt, nếu tất cả các lệnh UI đã làm xong thì mới thực hiện setInterval(), nên có độ trễ hơn so với requestAnimationFrame, độ mượt thấp hơn. Khi chuyển sang tab khác thì setInterval() vẫn hoạt động.

Callback và element xem tại đây:

4 Likes
#5

Cám ơn bạn Hùng nhiều, cho mình hỏi thêm 1 ý này nữa:

window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(callback,element){
                window.setTimeout(callback, 1000 / 60);
              };
}) ();

Tại sao ở cuối đoạn code lại phải có thêm cặp () này nữa ạ

#6

requestAnimationFrame là một phương thức(method) của trình duyệt, để xử lý chuyển động, sao cho mượt mà nhất có thể.
Ví dụ, máy tính bạn mạnh, có thể xử lý chuyển động 60fps, bạn sẽ thiết lập thời gian giữa các bước chuyển động(frame) là (1000 / 60). Nhưng với máy tính khách hàng, chỉ có thể chạy với 25fps, thì bạn sẽ thiết lập thế nào? Đó chính là tác dụng của requestAnimationFrame, nó sẽ tự xác định mức fps phù hợp nhất cho người dùng.
Vấn đề là mỗi trình duyệt lại dùng tên khác nhau cho method này (chỗ này bạn hiểu rồi). Vậy nếu trình duyệt cũ, không hỗ trợ thì sao? ta sẽ quay lại cách truyền thống, dùng setTimeout, ở mức 60fps.
Để tiện sử dụng, trong code trên, tác giả gộp vào hàm(function) requestAnimFrame, bạn có thể viết thành:

window.requestAnimFrame = window.requestAnimationFrame       || 
                          window.webkitRequestAnimationFrame || 
                          window.mozRequestAnimationFrame    || 
                          window.oRequestAnimationFrame      || 
                          window.msRequestAnimationFrame     || 
                          function(callback,element){
                              window.setTimeout(callback, 1000 / 60);
                          };

… vẫn chạy bình thường, vậy ra cái rắc rối này (function(){ ... })() không có tác dụng gì hết? Ờ đúng vậy đấy, trong trường hợp này.
(function(){ ... })() là hàm vô danh tự chạy (Self-invoking anonymous function).
(function(){ ... }) là hàm vô danh, thêm () sẽ tự chạy.
“Nó” cũng có thể viết thế này (function(){ ... }()). Hay chưa, mình cũng chả biết tại sao luôn, nhưng theo quy tắc JSLint thì phải viết kiểu “kia”.
Quay lại chuyện tại sao phải nhét nó vào hàm vô danh như thế kia, đó là nhằm cô lập biến (variable), để những biến trong đó không ảnh hưởng gì với phần còn lại của code (tìm hiểu thêm Scope in JavaScript). Tất nhiên trong code trên, trong đó chả có cái biến nào hết, nhưng giữ thói quen code như vậy cũng tốt.
callback, element mà bạn hỏi, trước hết nó là đối số(arguments) trong hàm. Bạn đặt nó thành tên gì cũng được… ờ mà cái này bạn học lại JavaScript function đi. Tìm mấy ví dụ làm nhiều là ngộ ra thôi, lý thuyết lắt léo câu chữ mà không hiểu nó làm cái gì thì cũng vô nghĩa.

6 Likes
#7

Cám ơn bạn rất nhiều. Bạn giải thích như vậy thì mình cũng thấy hiểu được nhiều điều hơn rồi hoặc chí ít nếu muốn tìm hiểu sâu hơn nữa thì mình cũng còn biết đường lên Google mà tra với mấy key word bạn cho.
(Scope in JavaScript, hàm vô danh)

Mình đang tự mày mò học và vì vốn tiếng anh còn yếu nên mỗi khi đăng bài hỏi mà nhận được những câu trả lời trợ giúp rất nhiệt tình như của bạn mình thực sự thấy quý trọng lắm.

Một lần nữa mình cám ơn bạn nhiêu .

1 Like
#8

Có bạn nào hiểu được cách tính sao để ra được mấy con số 0.002 , 192 , 256 , 0.9 trong đoạn Code trên của bạn chủ Topic không, có thể giải thích cho mình với được không ạ .

1 Like
#9

Cái này thực là mình cũng không rõ nữa. Cám ơn bạn đã quan tâm

#10

Mn cho e hỏi là setInterval() có truyền tham số thời gian để chạy vậy còn requestAnimationFrame thì làm sao để set tham số cho nó

#11

Nó có 1 tham số callback thôi mà.

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?