Question

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

我的代码在这里：

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

每当我点击一个按钮重新聚焦#target时，我都会这样打电话。但是，前几次尝试（点击）工作得很好而且很快，之后，＃34;焦点行动＆＃34;开始减速。大约30次点击，执行＆＃34;焦点操作＆＃34;至少需要3秒钟。并不断增加延迟。

这是由浏览器引起的吗？感谢您的任何建议。

Answer 1

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

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

希望这有帮助。

Answer 2

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

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

但是，例如有了这个小提琴，你可以看到它完美无缺，没有任何延迟，所以很难在没有更多代码的情况下理解问题的根源。

＆＃13;

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

＆＃13;

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

＆＃13;

更好的做法可能是：

＆＃13;

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

＆＃13;

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

＆＃13;

多个setTimeOut导致延迟？

2 个答案: