JavaScript setTimeout（）在重負載下減速

我創建了一個淡化元素背景顏色的腳本。我使用setTimeout（）每5毫秒對顏色進行漸進式更改。如果我一次只是淡化一種東西的背景顏色，那麼這個腳本很好用，但是如果我有50個元素，我會立即全部消失，速度比5 ms慢得多，因爲所有併發setTimeout（）同時運行。例如，通常應該在1秒內執行的淡入淡出，如果我一次淡入50個元素，則可能需要30秒。JavaScript setTimeout（）在重負載下減速

任何想法，我可以克服這一點？

這裏是萬一有人腳本有一個想法：

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);

來源

2009-07-30 core

下面是來自谷歌的article在這裏筆者討論了它們對Gmail的定時器工作。他們發現，使用單個高頻計時器的速度比使用多個計時器的速度要快，因爲如果他們使用重度和快速的計時器。

您可以有一個定時器每隔5ms觸發一次，並將需要褪色的所有元素添加到數據結構中，以跟蹤它們在衰落過程中的位置。然後，您的一個計時器可以查看該列表，並在每次觸發時爲每個元素執行下一個淡入淡出。

另一方面，您是否嘗試過使用類似Mootools或JQuery的庫，而不是滾動您自己的動畫框架？他們的開發人員已經投入了大量的工作來優化這些類型的操作。

來源

2009-07-30 20:36:31

我在想，一個計時器可能是要走的路，但我擔心有實施變革。 :)我實際上決定推出自己的產品，因爲我使用jQuery來製作動畫效果（），但實際上大約10％的時間沒有真正消失。不幸的是，這是一個不可接受的錯誤率。我會看看這篇文章。非常感謝！ – core 2009-07-30 20:43:34

首先你的腳本沒有考慮到最小超時通常是10-15ms，這取決於瀏覽器。你可以看到my post on this topic。在裏面你會找到一個流行瀏覽器的表格和一個測量它的程序的鏈接，所以你可以自己覈實索賠。我很抱歉地說，但每5ms迭代是一廂情願的想法。其次，定時器不是中斷。他們不能中斷在瀏覽器中運行的任何東西並執行它們的有效載荷。相反，它們將被推遲到運行代碼完成並且瀏覽器恢復控制並運行定時器的能力。褪色50個元素需要時間，我敢打賭它超過了5ms，尤其是如果考慮瀏覽器的整個延期模型：更新DOM，並且瀏覽器將更新它的可視化表示＆hellip;在某個時間點。

我要完成一個積極的：

相反淡出50個個人元素，試圖將它們分組，並淡化其母公司—它可以更快。
在UI中更具創意。試着想出一個解決方案，它不需要立即淡出很多獨立元素。
總是在圍繞它們進行設計之前驗證您的背景假設是正確的。
如果可以，請嘗試定位到現代瀏覽器。從我的個人經驗來看，谷歌瀏覽器非常適合定時器，其JavaScript引擎（V8）速度非常快。

來源

2009-07-31 01:29:16

除了其他的答案，這裏是由John Resig的約定時器的優秀文章：http://ejohn.org/blog/how-javascript-timers-work/

來源

2009-07-31 01:50:27 deceze

JavaScript setTimeout（）在重負載下減速

回答

相關問題