क्या होता है अगर हम डोम हेरफेर में requestAnimationFrame?

जब भी वहाँ है कुछ डोम हेरफेर डालने की तरह एक डोम तत्व ट्रिगर करेगा एक reflow और सबसे अधिक संभावना के द्वारा पीछा किया, एक फिर से रंगना

पेंटिंग का कार्य होता है asynchronously, तो "ट्रिगर" में समझा जाना चाहिए कि जिस तरह से. पहले अपने जावास्क्रिप्ट कोड से पहले खत्म हो जाएगा कि वास्तव में होता है ।

अगर हम किसी भी तरह का प्रबंधन करने के लिए एक डोम हेरफेर के अंदर इस आरएएफ (संपादित करें: और भी कतार में एक और आरएएफ अंत में) चलाता है जो एक reflow हर और इस प्रकार एक फिर से रंगना, हम में फँस जाएगा एक अनंत लूप के बिना वास्तव में प्रतिपादन स्क्रीन पर कुछ भी.

के लिए की जरूरत है फिर से रंगना जमा है, और नहीं कर रहे हैं synchronously पूरी की. पहले अपने कोड को पूरा करने के लिए है जब तक कॉल स्टैक खाली है । तो वहाँ है कोई अनंत लूप यहाँ.

या यह मामला है कि एक बार ब्राउज़र का फैसला किया था करने के लिए एक फिर से रंगना है, यह इसके साथ छड़ी और लागू होते हैं कि किसी भी अद्यतन में हुआ आरएएफ कॉलबैक में अगले फिर से रंगना?

हाँ. जब आरएएफ कॉलबैक कहा जाता है, कि कोड हो जाता है एक अंतिम मौका करने के लिए अद्यतन बनाने के लिए डोम, जो जमा कर सकते हैं और आगे की जरूरत के लिए चित्रकला. अगर है कि कॉलबैक आप भी रजिस्टर और कॉलबैक पर आरएएफ, यह निष्पादित नहीं होगा उस समय, लेकिन बाद में: में अगले समय है कि ब्राउज़र होगा तैयार अपने फिर से रंगना कार्य-इतना नहीं वर्तमान से एक है.

सरल उदाहरण

चलो कहते हैं कि आप इस कोड के बारे में:

requestAnimationFrame(update);

myElement.style.backgroundColor = "silver"; // This queues a need for repaint

function update() {
    // This queues a need for repaint
    myElement.style.width = Math.floor(Math.random() * 100) + "px";
    requestAnimationFrame(update);
}

जब यह निष्पादित करता है, हम निम्नलिखित क्रम:

1. update के रूप में पंजीकृत है कॉलबैक
2. पृष्ठभूमि परिवर्तन कार्यक्रम के लिए एक की जरूरत repainting
3. Callstack खाली हो जाता है
4. ब्राउज़र शुरू होता है, अपने को फिर से रंगना, लेकिन खाते में लेता है, वहाँ है एक पंजीकृत कॉलबैक. तो इसे हटा इस पंजीकरण (क्योंकि यह चाहिए केवल एक बार चलाने के लिए) और कार्यान्वित update कुछ भी करने से पहले और.
5. चौड़ाई बदलने के लिए, कार्यक्रम के लिए एक की जरूरत repainting. परिवर्तन की सूची अब शामिल पृष्ठभूमि बदलने के लिए और यह चौड़ाई बदलने के लिए और किसी भी झरना प्रभाव है कि गणना की गई है. (कैसे यह प्रतिनिधित्व किया है है ब्राउज़र पर निर्भर)
6. के update समारोह के रूप में पंजीकृत है कॉलबैक फिर से.
7. ब्राउज़र अब जाँच करता है कि यह क्या करने की जरूरत के भाग के रूप में यह फिर से रंगना नौकरी, और करता है कि सभी की जरूरत है की कल्पना करने के लिए प्रभाव की पृष्ठभूमि और चौड़ाई बदलता है.
8. रंग नौकरी समाप्त होता है । वह सब छोड़ दिया है है पंजीकृत update कॉलबैक.
9. जब ब्राउज़र करता है अपने अगले रंग चक्र है, हम से फिर से शुरू 4 कदम है, लेकिन अब वहाँ कोई पंक्तिबद्ध पृष्ठभूमि-परिवर्तन किसी भी अधिक है. बाकी के लिए यह हो जाएगा एक ही प्रक्रिया है ।