क्या डेबॉन्स फ़ंक्शन के भीतर requestAnimationFrame का उपयोग करना अच्छा विचार है?

Question

यह requestAnimationFrame की मेरी समझ पर एक चेक है। मुझे debounce फ़ंक्शन की आवश्यकता है, क्योंकि जब भी विंडो का आकार बदलता है और मैं ब्राउजर को अधिभारित नहीं करना चाहता हूं, तो मैं कुछ डोम इंटरैक्शन कर रहा हूं। एक सामान्य डिबॉन्स फ़ंक्शन प्रति अंतराल में केवल एक बार पारित कार्य को कॉल करेगा; अंतराल आमतौर पर दूसरा तर्क है। मुझे लगता है कि बहुत सारे यूआई काम के लिए, इष्टतम अंतराल उस समय की सबसे छोटी राशि है जो ब्राउज़र को अधिभारित नहीं करता है। मुझे ऐसा लगता है requestAnimationFrame करना होगा कि वास्तव में क्या है कि कि:

var debounce = function (func, execAsap) { 
    var timeout; 

    return function debounced() { 
    var obj = this, args = arguments; 
    function delayed() { 
     if (!execAsap) 
     func.apply(obj, args); 
     timeout = null; 
    }; 

    if (timeout) 
     cancelAnimationFrame(timeout); 
    else if (execAsap) 
     func.apply(obj, args); 

    timeout = requestAnimationFrame(delayed); 
    }; 
} 

ऊपर कोड the above debounce link से सीधी नकल बंद है, लेकिन requestAnimationFrame साथ setTimeout के बजाय इस्तेमाल किया। मेरी समझ में, यह जितनी जल्दी हो सके पास-इन फ़ंक्शन को कतारबद्ध करेगा, लेकिन ब्राउजर की तुलना में तेज़ी से आने वाली कोई भी कॉल गिर जाएगी। यह सबसे आसान संभव बातचीत का उत्पादन करना चाहिए। क्या मैं सही रास्ते पर हूं? या मैं requestAnimationFrame गलत समझ रहा हूँ?

(बेशक यह केवल आधुनिक ब्राउज़रों पर काम करता है, लेकिन वहाँ requestAnimationFrame के लिए आसान polyfills कि अभी वापस setTimeout के लिए आते हैं।)

Answer 1

यह काम करेंगे।

यह एक चेतावनी है कि या आप के लिए महत्वपूर्ण नहीं हो सकता है:

पेज नहीं वर्तमान में दृश्यमान है, तो उस पृष्ठ पर एनिमेशन भारी से रोक दिए जा सकता है ताकि वे अक्सर अद्यतन नहीं करते हैं और इस तरह की खपत छोटी सीपीयू शक्ति।

तो अगर आप समारोह आप debouncing कर रहे हैं के लिए इस बारे में किसी कारण देखभाल के लिए, आप setTimeout(fn, 0)

अन्यथा यदि आप एनिमेशन के लिए इस का उपयोग कर रहे का उपयोग कर बेहतर कर रहे हैं, इस requestAnimationFrame

का इरादा उपयोग है