जब एनीमेशन की बात आती है, तो हमें बताया जाता है कि setIntervalयह एक बुरा विचार है। क्योंकि, उदाहरण के लिए, लूप कुछ भी चल रहा है, बल्कि विनम्रता से requestAnimationFrameइच्छाशक्ति की तरह चलने की परवाह किए बिना चलेगा। इसके अलावा कुछ ब्राउज़र एक सेट इन्टरवल लूप के साथ "कैचअप प्ले" कर सकते हैं, जहाँ एक निष्क्रिय टैब पुनरावृत्तियों को पंक्तिबद्ध कर रहा होगा और फिर से सक्रिय होने पर उन्हें पकड़ने के लिए उन सभी को बहुत तेज़ी से चलाएगा।
यदि आप उपयोग करना चाहते हैं setInterval, लेकिन प्रदर्शन की विनम्रता चाहते हैं requestAnimationFrame, तो इंटरनेट के पास कुछ विकल्प उपलब्ध हैं!
सेर्गेई शिमान्स्की से:
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; );विभिन्नताओं के लिए टिप्पणी देखें, जैसे अंतराल को साफ़ करना, और टाइमआउट सेट करना और साफ़ करना।
यह जो लाम्बर्ट के संस्करण पर एक बदलाव था:
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); );जो भाग में अधिक क्रिया है क्योंकि यह विक्रेता के उपसर्ग को संभालता है। यह बहुत संभावना है कि आपको विक्रेता के उपसर्ग की आवश्यकता नहीं है। अनुरोध के लिए ब्राउज़र समर्थन देखें। यदि आपको IE 9 या Android 4.2-4.3 का समर्थन करने की आवश्यकता है, तो आप इसका उपयोग बिल्कुल नहीं कर सकते। विक्रेता उपसर्ग केवल सफारी और फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए मदद करता है।
और StackExchange से एक और:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start