Remplacements pour setInterval Utilisation de requestAnimationFrame - Astuces CSS

En matière d'animation, on nous dit que setIntervalc'est une mauvaise idée. Parce que, par exemple, la boucle fonctionnera indépendamment de tout ce qui se passe, plutôt que de céder poliment comme la requestAnimationFramevolonté. De plus, certains navigateurs peuvent «rattraper» avec une boucle setInterval, où un onglet inactif peut avoir mis des itérations en file d'attente, puis les exécuter très rapidement pour rattraper son retard lorsqu'il redevient actif.

Si vous souhaitez utiliser setInterval, mais que vous voulez la politesse des performances requestAnimationFrame, Internet propose des options!

De 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; );

Voir le commentaire pour les variations, comme la suppression de l'intervalle et la définition et la suppression des délais d'expiration.

C'était une variante de la version de 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); );

Ce qui est plus détaillé en partie parce qu'il gère le préfixage du fournisseur. Il est très probable que vous n'ayez pas besoin du préfixe du fournisseur. Consultez la prise en charge du navigateur pour requestAnimationFrame. Si vous devez prendre en charge IE 9 ou Android 4.2-4.3, vous ne pouvez pas du tout l'utiliser. Le préfixe du fournisseur n'aide que pour les versions assez anciennes de Safari et Firefox.

Et un autre de StackExchange:

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