जावास्क्रिप्ट सेटटाइमआउट() भारी लोड

Question

के तहत धीमा हो गया है मैंने एक स्क्रिप्ट बनाई है जो तत्व के पृष्ठभूमि रंग को फीका करती है। मैं प्रत्येक 5 एमएस रंग में वृद्धिशील परिवर्तन करने के लिए setTimeout() का उपयोग करता हूं। स्क्रिप्ट बहुत अच्छा काम करती है अगर मैं एक समय में एक चीज के पृष्ठभूमि रंग को लुप्त कर रहा हूं, लेकिन अगर मुझे मिल गया है, तो कहें, 50 तत्व मैं सभी एक बार में लुप्त हो रहा हूं, गति 5 एमएस से बहुत धीमी है समवर्ती सेटटाइमआउट() एक बार में चल रहा है। एक फीका जो आम तौर पर 1 सेकंड में निष्पादित होनी चाहिए, उदाहरण के लिए, अगर मैं 50 तत्वों को एक बार में लुप्त कर रहा हूं तो 30 सेकंड लग सकते हैं।

कोई विचार मैं इसे कैसे दूर कर सकता हूं?

यहाँ मामला किसी में स्क्रिप्ट एक उपाय हैं है:

function fadeBackground(elementId, start, end, time) { 
    var iterations = Math.round(time/5); 

    var step = new Array(3); 

    step[0] = (end[0] - start[0])/iterations; 
    step[1] = (end[1] - start[1])/iterations; 
    step[2] = (end[2] - start[2])/iterations; 

    stepFade(elementId, start, step, end, iterations); 
} 

function stepFade(elementId, cur, step, end, iterationsLeft) { 
    iterationsLeft--; 

    document.getElementById(elementId).style.backgroundColor 
     = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")"; 

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft); 
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft); 
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft); 

    if (iterationsLeft > 1) { 
     setTimeout(function() { 
      stepFade(elementId, cur, step, end, iterationsLeft); 
     }, 5); 
    } 
    else { 
     document.getElementById(elementId).style.backgroundColor 
      = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")"; 
    } 
} 

यह इस तरह किया जाता है:

fadeBackground("myList", [98,180,232], [255,255,255], 1000); 

Answer 1

यहाँ गूगल से एक article जहाँ लेखक Gmail के लिए टाइमर पर उनके काम की चर्चा है। उन्होंने पाया कि यदि वे भारी और तेज टाइमर उपयोग करते हैं तो एकाधिक टाइमर का उपयोग करने से एक उच्च आवृत्ति टाइमर तेज होता है।

आपके पास एक टाइमर हो सकता है जो हर 5ms में आग लगाता है, और अपने सभी तत्वों को जोड़ता है जिन्हें डेटा संरचना में फीका होना चाहिए जो ट्रैक करता है कि वे लुप्तप्राय प्रक्रिया में कहां हैं। फिर आपका एक टाइमर उस सूची को देख सकता है और हर बार ट्रिगर होने पर प्रत्येक तत्व के लिए अगली फीड कर सकता है।

दूसरी ओर, क्या आपने अपनी खुद की एनीमेशन ढांचे को रोल करने के बजाय Mootools या JQuery जैसी लाइब्रेरी का उपयोग करने का प्रयास किया है? उनके डेवलपर्स ने इस तरह के संचालन को अनुकूलित करने में बहुत काम किया है।

Answer 2

आपकी सभी लिपि में से कोई भी इस बात पर ध्यान नहीं देता है कि ब्राउजर के आधार पर न्यूनतम टाइमआउट आमतौर पर 10-15ms होता है। आप my post on this topic देख सकते हैं। अंदर आपको लोकप्रिय ब्राउज़रों के लिए एक टेबल मिलेगा और प्रोग्राम को एक लिंक मिलेगा जो इसे मापता है, ताकि आप स्वयं दावा को सत्यापित कर सकें। मुझे खेद है कि हर 5ms पुनरावृत्ति एक इच्छापूर्ण सोच है।

दूसरा, टाइमर बाधा नहीं हैं। उनमें कोई जादू नहीं है — वे ब्राउज़र में जो कुछ भी चल रहे हैं उसे बाधित नहीं कर सकते हैं और उनके पेलोड को निष्पादित नहीं कर सकते हैं। इसके बजाए वे चलने वाले कोड को समाप्त होने तक स्थगित होने जा रहे हैं और ब्राउज़र नियंत्रण और टाइमर चलाने की क्षमता वापस ले जाता है। 50 तत्वों को लुप्त करने में समय लगता है, और मुझे लगता है कि यह 5ms से अधिक है, खासकर यदि आप ब्राउज़र के पूरे स्थगित मॉडल को ध्यान में रखते हैं: आप डोम अपडेट करते हैं, और ब्राउज़र इसके दृश्य प्रतिनिधित्व और नरक को अपडेट करेगा; समय पर किसी बिंदु पर।

मैं एक सकारात्मक नोट पर समाप्त करना चाहते हैं:

• 50 अलग-अलग तत्वों बाहर fading के बजाय, समूह के लिए उन्हें कोशिश करते हैं और उनके माता पिता — फीका यह तेजी से हो सकता है।
• यूआई पर अधिक रचनात्मक बनें। समाधान के साथ आने का प्रयास करें, जिसे एक ही समय में बहुत से स्वतंत्र तत्वों को लुप्त करने की आवश्यकता नहीं होती है।
• हमेशा सत्यापित करें कि आपकी पृष्ठभूमि धारणाएं उनके चारों ओर डिज़ाइन करने से पहले सही हैं।
• यदि आप कर सकते हैं, तो आधुनिक ब्राउज़र को लक्षित करने का प्रयास करें। मेरे व्यक्तिगत अनुभव से Google क्रोम टाइमर के साथ बहुत अच्छा है, और इसका जावास्क्रिप्ट इंजन (वी 8) बेहद तेज़ है।

Answer 3

अन्य उत्तर के अलावा, यहां टाइमर के बारे में जॉन Resig द्वारा एक उत्कृष्ट लेख है: http://ejohn.org/blog/how-javascript-timers-work/