सीएसएस एनिमेशन रोकने

Question

जावास्क्रिप्ट समारोह चल रहा है जब मान लीजिए कि मैं इस जावास्क्रिप्ट समारोह करते हैं:

function pauseComp(ms) { 
    var date = new Date(); 
    var curDate = null; 
    do { curDate = new Date(); } 
    while(curDate-date < ms); 
    } 

और एक css3 एनीमेशन (उदाहरण के लिए, <i class="icon-spinner icon-spin"></i> नई font-awesome 3 से)। जब मैं उपरोक्त जावास्क्रिप्ट फ़ंक्शन चलाता हूं, तो फ़ंक्शन चलने पर स्पिनर बंद हो जाता है। देखें कि मैं here के बारे में क्या बात कर रहा हूं। असल में, जावास्क्रिप्ट सीएसएस एनिमेशन को रोकता है, और मैं सोच रहा हूं कि क्यों, या अगर किसी और ने यह देखा है/एक कामकाज मिला है। मैंने इसे एक सेटटाइमआउट (एफएन, 0) में डालने की कोशिश की है, जहां एफएन लंबी प्रक्रिया है, लेकिन फिर एहसास हुआ कि यह क्यों काम नहीं करेगा (जेएस बहुसंख्यक नहीं है)। किसी ने यह देखा है?

अद्यतन: दिलचस्प बात यह है कि ऐसा लगता है कि सफारी में यह कोई समस्या नहीं है, हालांकि ब्राउज़र इंटरफ़ेस के साथ बातचीत अभी भी प्रभावित हो रही है।

Answer 1

एक ब्राउज़र पृष्ठ एकल थ्रेडेड है। यूआई को अपडेट करना आपके जावास्क्रिप्ट प्रोग्राम के समान थ्रेड पर होता है। जिसका अर्थ यह भी है कि जावास्क्रिप्ट कोड निष्पादित होने पर कोई भी एनीमेशन नए फ्रेम नहीं खींचागा। आम तौर पर, यह कोई बड़ा सौदा नहीं है क्योंकि अधिकांश जेएस कोड को एक ही एनीमेशन फ्रेम से तेज़ी से निष्पादित किया जाता है।

तो सबसे अच्छी सलाह यह है कि: ऐसा मत करो। उस लंबे समय तक जेएस इंजन को लॉक न करें। ऐसा करने के लिए एक क्लीनर तरीका चित्रित करें।

---

हालांकि, यदि आपको चाहिए, तो एक तरीका है। आप HTML5's Web Workers API के माध्यम से एक अतिरिक्त धागा प्राप्त कर सकते हैं। यह पुराने ब्राउज़र में समर्थित नहीं है, लेकिन यह आपको मुख्य वेबपृष्ठ से और अपने स्वयं के धागे में कुछ लंबे समय तक चलने वाले CPU चूसने कोड को चलाने की अनुमति देगा, और फिर इसे पूरा होने पर आपके पृष्ठ पर कुछ परिणाम पोस्ट कर देगा।