Όταν πρόκειται για κινούμενα σχέδια, μας λένε ότι setIntervalείναι κακή ιδέα. Γιατί, για παράδειγμα, ο βρόχος θα τρέχει ανεξάρτητα από οτιδήποτε άλλο συμβαίνει, αντί να αποδίδει ευγενικά την ίδια requestAnimationFrameβούληση. Επίσης, ορισμένα προγράμματα περιήγησης μπορεί να "παίξουν catchup" με ένα βρόχο setInterval, όπου μια ανενεργή καρτέλα μπορεί να έχει ουρές επαναλήψεις και στη συνέχεια να τα εκτελέσει όλα πολύ γρήγορα για να καλύψει τη διαδικασία όταν ενεργοποιηθεί ξανά.
Εάν θέλετε να χρησιμοποιήσετε setInterval, αλλά θέλετε την ευγένεια της απόδοσης requestAnimationFrame, το Διαδίκτυο διαθέτει μερικές διαθέσιμες επιλογές!
Από τον 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; );Δείτε το σχόλιο για τις παραλλαγές, όπως εκκαθάριση του διαστήματος και ρύθμιση και εκκαθάριση χρονικών ορίων.
Αυτή ήταν μια παραλλαγή στην έκδοση του 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); );Το οποίο είναι πιο ρητό εν μέρει επειδή χειρίζεται το πρόθεμα προμηθευτή. Είναι πολύ πιθανό να μην χρειάζεστε το πρόθεμα προμηθευτή. Δείτε την υποστήριξη του προγράμματος περιήγησης για requestAnimationFrame. Εάν πρέπει να υποστηρίξετε το IE 9 ή το Android 4.2-4.3, δεν μπορείτε να το χρησιμοποιήσετε καθόλου. Το πρόθεμα προμηθευτή βοηθά μόνο σε αρκετά παλιές εκδόσεις των Safari και Firefox.
Και ένα ακόμη από το StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start