你如何減慢JavaScript中for循環的執行速度？

我正在製作一個基本的圖像滑塊（按next/prev按鈕，圖片發生變化）。我也試圖實現一個非常簡單的淡入淡出效果;要做到這一點，我有一個for循環，改變圖像的類，循環通過改變不透明度的類。代碼工作正常，做我想做的事情，但for循環執行得非常快，您不會注意到不透明度的變化。我看遍了，到處都有人提到setTimeout，但這隻會導致函數延遲啓動..我只想減慢我的for循環，以便您可以在視覺上注意到每次迭代。你如何減慢JavaScript中for循環的執行速度？

function nextphoto(){ 

    for(var x = 0; x < 5; x++){ 
     photo.className = fade[x]; 
    } 

    i++; 
    if(i>19){ 
    i=0; 
    } 

    photo.src = image[i]; 

    for(var y = 4; y >= 0; y--){ 
     photo.className = fade[y]; 
    } 
}

來源

2015-04-26 PrettyTone

這是一種複雜的方式來做一些簡單的事情，爲什麼不使用CSS轉換和在傳出和傳入的div上切換單個類來設置不透明度？這樣，你只需要對傳入元素的類更改設置setTimeout。 – Sidd

也許'setInterval（）'是操作延遲的正確方法。 –

您可能會誤解同步代碼執行的概念。所有代碼必須在任何可以更新或「渲染」到屏幕之前完成運行。所以你的for循環會一直運行直到完成，然後屏幕會更新，但它當然只會有最終的圖像渲染視圖。

你應該觸發一個CSS轉換，通過javascript動態地向元素添加一個類，或者如果你迫不及待地想在代碼中做所有事情，有一些理由不使用CSS，也不想寫一個自定義每幀動畫系統或使用庫，然後在for循環的每次迭代中，觸發一個異步函數，該函數將在稍後和稍後時間在當前同步for循環代碼之外進行更新。

即：

var aThing; 
for(var i = 0; i < someNumber; i++){ 
    setTimeout(function(){ 
    aThing.someValue = aThing.someValue * .9; 
    }, 500 * i); 
}

來源

2015-04-26 21:24:45

我不知道同步代碼執行;感謝您的解釋，這真的很有幫助！ – PrettyTone

您應該考慮使用jQuery的動畫（）函數以動畫狀混濁CSS值。更好的是你可以使用CSS動畫。

你在做什麼並不是達到目標的好方法。如果你真的想這樣，你應該使用setInterval或setTimeout。

來源

2015-04-26 21:28:22

是的使用Jquery或css轉換可能是更好的想法，我只是想知道如果我可以使用純JavaScript來做 - 儘管它看起來比沒有必要的更麻煩。謝謝！ – PrettyTone

你如何減慢JavaScript中for循環的執行速度？

回答

相關問題