多setTimeOut導致延遲？

Question

我想知道是否反覆使用多個setTimeOut（）會導致延遲問題。

我的代碼是在這裏：

setTimeout(function(){ $("#target").focus(); }, 50); 

我，當我點擊一個按鈕，重新專注於#target每次調用它。但是第一對夫婦嘗試（點擊）工作得很好，而且之後「關注行動」開始放緩。大約30次點擊，執行「焦點行動」至少需要3秒鐘，並且不斷增加延遲。

是由瀏覽器造成的嗎？感謝您的任何建議。

Answer 1

您能否分享您的代碼重現該行爲的例子？

基本上在某些情況下，它可能是最好的做法，取消以前的超時，當另一個超時過程中，或先前請求完成之前不會建立新的，

但是例如本撥弄你可以看到它可以毫無延遲地工作，所以它很難在沒有更多代碼的情況下理解問題的根源。

function clickFocus(){ 
 
    setTimeout(function(){ $("#target").focus(); }, 50); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="clickFocus()"> 
 
focus 
 
</button> 
 
<input type="text" id="target" />

一個更好的做法可能是：

var awaitingFocus; 
 
function clickFocus(){ 
 
    if(!awaitingFocus){ 
 
    awaitingFocus = setTimeout(function(){ 
 
     $("#target").focus(); 
 
     awaitingFocus = false; 
 
    }, 50); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="clickFocus()"> 
 
focus 
 
</button> 
 
<input type="text" id="target" />

Answer 2

閱讀有關JS中的事件循環。 也看這部影片。很有幫助。

https://www.youtube.com/watch?v=8aGhZQkoFbQ

希望這會有所幫助。