جافا سكريبت setTimeout() يبطئ تحت الحمل الثقيل

Question

لقد خلق السيناريو الذي يتلاشى لون خلفية عنصر.يمكنني استخدام setTimeout() لجعل التغيير التدريجي إلى اللون كل 5 مللي ثانية.يعمل البرنامج النصي كبيرة إذا أنا فقط يتلاشى لون الخلفية من شيء واحد في وقت واحد ، ولكن إذا كان لدي 50 العناصر أنا كل ما يتلاشى في آن واحد ، سرعة أبطأ بكثير من 5 مللي ثانية لأن كل المتزامنة setTimeout()s تعمل في وقت واحد.تتلاشى عادة أن التنفيذ في 1 ثانية ، على سبيل المثال ، قد يستغرق 30 ثانية إذا أنا يتلاشى 50 العناصر في وقت واحد.

أي أفكار كيف يمكنني التغلب على هذا ؟

هنا هو السيناريو في حالة أي شخص لديه أفكار:

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

وهنا هو href="http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series-using.html" المقالة من جوجل حيث يناقش المؤلف عملهم على توقيت ل Gmail. ووجد الباحثون أن وجود واحد الموقت عالية التردد كان أسرع من استخدام توقيت متعددة إذا كان لديهم استخدام الموقت الثقيل والسريع.

هل يمكن أن يكون توقيت واحد أن يطلق كل 5MS، وإضافة كافة العناصر الخاصة بك التي تحتاج إلى أن تلاشى إلى بنية بيانات التي تتعقب مكان وجودهم في عملية التلاشي. ثم بك الموقت يمكن للمرء أن ننظر من خلال تلك القائمة وأداء تتلاشى المقبل لكل عنصر في كل مرة يتم تشغيله.

من ناحية أخرى، هل حاولت استخدام مكتبة مثل موتولز أو <وأ href = "HTTP: // jquery.com/ "يختلط =" noreferrer "> مسج بدلا من المتداول إطار الرسوم المتحركة الخاصة بك؟ المطورين قد وضعت الكثير من العمل في تحسين هذا النوع من العمليات.

Answer 2

أولا البرنامج النصي الخاص بك لا تأخذ في الاعتبار أن الحد الأدنى مهلة عادة 10-15ms اعتمادا على المتصفح.يمكنك أن ترى موقعي على هذا الموضوع.داخل ستجد طاولة المتصفحات الشعبية رابط البرنامج الذي يقيس ذلك ، حتى تتمكن من التحقق من المطالبة نفسك.أنا آسف أن أقول ولكن التكرار كل 5 مللي ثانية هو التمني.

ثانيا, توقيت لا يقطع.لا يوجد سحر في منها — أنها لا يمكن أن يقطع ما هو قيد التشغيل في المتصفح وتنفيذ تلك الحمولة.بدلا من ذلك أنهم ذاهبون إلى أن تأجيل تشغيل التعليمات البرمجية التشطيبات المتصفح يعود التحكم و القدرة على تشغيل أجهزة ضبط الوقت.يتلاشى 50 العناصر تأخذ وقت و أراهن أنها أكثر من 5 مللي ثانية ، وخاصة إذا كنت تأخذ في الاعتبار كل المؤجلة نموذج من المتصفح:تحديث دوم وسيقوم المتصفح تحديث التمثيل البصري في بعض نقطة في الوقت المناسب.

أريد أن أنهي على ملاحظة إيجابية:

• بدلا من أن يتلاشى 50 العناصر الفردية ، محاولة مجموعة منهم وتتلاشى الوالدين — يمكن أن يكون أسرع.
• تكون أكثر إبداعا في واجهة المستخدم.في محاولة للتوصل إلى حل ، والتي لا تتطلب يتلاشى الكثير من عناصر مستقلة في آن واحد.
• دائما التحقق من أن الخلفية الخاصة بك الافتراضات صحيحة قبل تصميم حولهم.
• إذا كنت تستطيع ، في محاولة لاستهداف المتصفحات الحديثة.من تجربتي الشخصية جوجل كروم هو جيد جدا مع توقيت ، و محرك جافا سكريبت (V8) هو سريع للغاية.

Answer 3

وبالإضافة إلى إجابات أخرى، وهنا مقال ممتاز من قبل جون ريسيغ حول توقيت: <لأ href = "http://ejohn.org/blog/how-javascript-timers-work/" يختلط = "نوفولو noreferrer" > http://ejohn.org/blog/how-javascript-timers-work/