在循環中設置超時

Question

在for循環中設置超時的最佳方法是什麼？我有一個方塊，點擊後，預期的結果是它每500毫秒減少1px。我試圖通過將top屬性的CSS值設置爲i並以500毫秒的超時值進行封裝來做到這一點。

發生什麼事情是「掛起」，看起來像前幾個像素，直到底部發射。

我有什麼迄今爲止低於：

$("#rect").click(function() { 
 
    \t for (i = 0; i < 200; i++) { 
 
    \t (function(i){ 
 
     \t setTimeout(function() { 
 
     $("#rect").css("top", i) 
 
     }, 500); 
 
     })(i); 
 
    } \t 
 
}); 
 

 
$("#reset").click(function() { 
 
    \t $("#rect").css("top", "0"); 
 
});

#rect { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: #333; 
 
} 
 

 
#rect:hover { 
 
    cursor: pointer; 
 
} 
 

 
#reset { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="rect"></div> 
 

 
<button id="reset">reset</button>

Howcome說明在環路內超時i頂部屬性值不工作？

Answer 1

你的計時功能是錯的，將它改爲500 * i;如果你想讓它移動每一次迭代。

目前所有的下一個定時器，火災爲500ms，這就是爲什麼它跳躍

$("#rect").click(function() { 
    for (let i = 0; i < 200; i++) { 
     setTimeout(function() { 
     $("#rect").css("top", i); 
     }, 500*i); 
    }  
}); 

$("#reset").click(function() { 
    $("#rect").css("top", "0"); 
}); 

但是在其他的答案中提到，您可以使用很多其他的解決方案。動畫，向上滑動都更加健壯。

Answer 2

setTimeout是一個匿名函數，所以循環調用函數並進入下一次迭代，幾乎全部設置超時。

此外，你可能想要使用setInterval來做到這一點。它會多次重複回調。

https://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 3

我沒有檢查你的代碼，但UF你需要移動一個矩形，並且您已經使用jQuery，你不妨使用jQuery滑動efects https://api.jquery.com/category/effects/sliding/

一個例子：

$("#book").slideUp("slow", function() { 
    // Animation complete. 
    }); 

有時很難創建這樣的簡單效果，因爲它與瀏覽器在繪畫上呈現非常快速的變化有關

Answer 4

看起來您正在創建200個超時，所有超時都在同一時間運行，並且每個元素都將像素降低一個像素，從而使其外觀下降。

你想要的更接近於此。設置一個時間間隔來運行你的功能，每500ms移動一個方框：

setInterval(moveBox, 500); 
var boxMovedTimes = 0; 

function moveBox() { 
    $('#rect').css('top', boxMovedTimes + "px"); 
    boxMovedTimes += 1; 
    console.log('moved ' + boxMovedTimes) 
}