Thay thế cho setInterval Sử dụng requestAnimationFrame - Thủ thuật CSS

Khi nói đến hoạt hình, chúng tôi nói rằng đó setIntervallà một ý tưởng tồi. Bởi vì, ví dụ, vòng lặp sẽ chạy bất kể bất cứ điều gì khác đang diễn ra, thay vì mang lại một cách lịch sự như requestAnimationFrameý muốn . Ngoài ra, một số trình duyệt có thể “chơi bắt kịp” với vòng lặp setInterval, trong đó một tab không hoạt động có thể đang xếp hàng lặp lại và sau đó chạy tất cả chúng rất nhanh để bắt kịp khi nó hoạt động trở lại.

Nếu bạn muốn sử dụng setInterval, nhưng muốn hiệu suất lịch sự requestAnimationFrame, internet có sẵn một số tùy chọn!

Từ Serguei Shimansky:

var requestInterval = function (fn, delay) ( var requestAnimFrame = (function () ( return window.requestAnimationFrame || function (callback, element) ( window.setTimeout(callback, 1000 / 60); ); ))(), start = new Date().getTime(), handle = (); function loop() ( handle.value = requestAnimFrame(loop); var current = new Date().getTime(), delta = current - start; if (delta >= delay) ( fn.call(); start = new Date().getTime(); ) ) handle.value = requestAnimFrame(loop); return handle; );

Xem nhận xét về các biến thể, như xóa khoảng thời gian, cài đặt và xóa thời gian chờ.

Đây là một biến thể trên phiên bản của Joe Lambert:

window.requestInterval = function(fn, delay) ( if( !window.requestAnimationFrame && !window.webkitRequestAnimationFrame && !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setInterval(fn, delay); var start = new Date().getTime(), handle = new Object(); function loop() ( var current = new Date().getTime(), delta = current - start; if(delta >= delay) ( fn.call(); start = new Date().getTime(); ) handle.value = requestAnimFrame(loop); ); handle.value = requestAnimFrame(loop); return handle; ) window.clearRequestInterval = function(handle) ( window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) : window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) : window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */ window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) : window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) : window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) : clearInterval(handle); );

Nó dài dòng hơn một phần vì nó xử lý tiền tố của nhà cung cấp. Rất có thể bạn không cần tiền tố của nhà cung cấp. Xem hỗ trợ của trình duyệt cho requestAnimationFrame. Nếu bạn cần hỗ trợ IE 9 hoặc Android 4.2-4.3, bạn hoàn toàn không thể sử dụng điều này. Tiền tố của nhà cung cấp chỉ giúp ích cho các phiên bản Safari và Firefox khá cũ.

Và một nữa từ StackExchange:

window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start