複数の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

は、この情報がお役に立てば幸いです。