多个 setTimeOut 导致延迟？答案

【问题标题】：Multiple setTimeOut lead to latency?多个 setTimeOut 导致延迟？
【发布时间】：2016-12-19 23:34:41
【问题描述】：

我想知道重复使用多个 setTimeOut() 是否会导致延迟问题。

我的代码在这里：

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

每次单击按钮以重新关注#target 时，我都会调用它。但是前几次尝试（点击）工作得很好而且很快，之后，“焦点动作”开始变慢。大约 30 次点击，“焦点动作”的执行至少需要 3 秒，并不断增加延迟。

是浏览器造成的吗？感谢您的任何建议。

【问题讨论】：

标签： javascript jquery browser settimeout latency

【解决方案1】：

阅读 JS 中的事件循环。另请观看此视频。很有帮助。

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

您能否分享一个重现该行为的代码示例？

基本上在某些情况下，最佳做法是在另一个超时正在进行时取消以前的超时，或者在上一个请求完成之前不创建新的超时，

但是，例如使用这个小提琴，您可以看到它工作得非常好，没有任何延迟，因此如果没有更多代码，很难理解问题的根源。

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" />

【讨论】：