Xin giúp đỡ về requestAnimFrame

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.

Nó có lặp lại đâu.
Một cái là Anim, cái kia là Animation

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 :

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.

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ó .

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:

MDN Web Docs

window.requestAnimationFrame()

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be...

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 ạ

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.

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 .

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 ạ .

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 ạ .

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