JavaScriptの関数に時間遅延を付けるにはどうすればよいですか？

Question

私はプログラミングとコーディングが初めてで、小さなプロジェクトで助けが必要です。私は、機能が起動する前に少し時間を遅らせる必要があります。私はHTML5キャンバスを使用していて、ポンを再作成しようとしています。とにかく、ballReset()関数が呼び出される前に、わずかな時間の遅れを入れたいと思います。また、それはスクリプト全体ではなく、ballReset()関数が呼び出される部分です。

function moveEverything() { 
    computerMovement(); 

    ballX = ballX + ballSpeedX; 
    ballY = ballY + ballSpeedY; 

    if(ballX < 0) { 
     if(ballY > paddle1Y && 
      ballY < paddle1Y+PADDLE_HEIGHT) { 
      ballSpeedX = -ballSpeedX; 
     } else { 
      ballReset(); 
      player2Score++; 
     } 
    } 

    if(ballX > canvas.width) { 
     if(ballY > paddle2Y && 
      ballY < paddle2Y+PADDLE_HEIGHT) { 
      ballSpeedX = -ballSpeedX; 
     } else { 
      ballReset();  
      player1Score++; 
     } 
    } 
    if(ballY < 0) { 
     ballSpeedY = -ballSpeedY; 
    } 
    if(ballY > canvas.height) { 
     ballSpeedY = -ballSpeedY; 
    } 
} 

Answer 1

は何あなたが探していることはsetTimeout FNで、コールバックとして）（FNのballResetを渡します！ 3000ms遅れで表示例えば

、

setTimeout(function() { 
    ballReset() 
}.bind(this), 3000) 

あなたは、次のドキュメントページにsetTimeoutについての詳細を見つけることができますhttps://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Answer 2

JavaScriptでタイマー機能の2つ（主に使用される）のタイプがありますsetTimeoutとsetInterval （other）

これらの方法はどちらも同じシグネチャを持っています。彼らは、コールバック機能と遅延時間をパラメータとして取ります。

setTimeoutは遅延後に1回だけ実行され、一方setIntervalはすべての遅延秒後にコールバック関数を呼び出し続けます。

これらのメソッドは両方とも、タイマーの有効期限が切れる前にクリアするために使用できる整数の識別子を返します。

clearTimeoutとclearIntervalこれらのメソッドの両方が上記の機能setTimeoutとsetInterval

をから返される整数の識別子を取る例：

setTimeout

alert("before setTimeout"); 

setTimeout(function(){ 
     alert("I am setTimeout"); 
    },1000); //delay is in milliseconds 

    alert("after setTimeout"); 

あなたは上記のコードを実行した場合あなたはそれが警告を受けるのを見るでしょうbefore setTimeout、その後after setTimeout最終的には、1秒（1000ミリ秒）後I am setTimeoutに警告

あなたは例から気づくことができる何setTimeout(...)はタイマーが前に経過を取得することは待たないことを意味する非同期であるということです次の声明に行く。電子alert("after setTimeout");

例：

setInterval

alert("before setInterval"); //called first 

var tid = setInterval(function(){ 
     //called 5 times each time after one second 
     //before getting cleared by below timeout. 
     alert("I am setInterval"); 
    },1000); //delay is in milliseconds 

    alert("after setInterval"); //called second 

setTimeout(function(){ 
    clearInterval(tid); //clear above interval after 5 seconds 
},5000); 

あなたは上記のコードを実行した場合、あなたはそれがafter setIntervalその後、before setIntervalを警告し、最終的にそれがI am setIntervalに警告していることがわかります setTimeoutは5秒後にタイマーをクリアするため、1秒後に5回（1000ms）、それ以外の場合は1秒ごとにアラートが表示されます。I am setInterval無限になります。

ブラウザは内部的にどうしていますか？

簡単に説明します。

JavaScriptがイベントキューについて知っておく必要があることを理解する。ブラウザに実装されたイベントキューがあります。イベントがjsでトリガされるたびに、これらのイベント（クリックなど）がすべてこのキューに追加されます。ブラウザに何も実行されていなければ、キューからイベントを受け取り、それを1つずつ実行します。

setTimeoutまたはsetIntervalをコールすると、コールバックはブラウザのタイマーに登録され、所定の時間が経過するとイベントキューに追加され、最終的にJavaScriptがイベントをキューから取り出して実行します。

これは、javascriptエンジンがシングルスレッドであり、一度に1つしか実行できないためです。だから、彼らは他のjavascriptを実行することはできず、あなたのタイマーを追跡することはできません。そのため、これらのタイマーはブラウザに登録されており（ブラウザはシングルスレッドではありません）、タイマーの経過を把握し、タイマーの期限が切れた後にキューにイベントを追加することができます。

setIntervalの場合にのみ同じイベントが発生します。この場合、イベントはクリアされるか、ブラウザページがリフレッシュされるまで、指定された間隔で何度もキューに追加されます。あなたはこれらの関数に渡す

注

遅延パラメータは、コールバックを実行するための最小遅延 時間です。これは、タイマーの終了後に ブラウザが javascriptエンジンによって実行されるキューにイベントを追加するためですが、コールバックの実行はキュー内の イベント位置によって異なり、エンジンはシングルスレッドであるため、 が実行されますキュー内のすべてのイベントを1つずつ表示します。

はしたがって、あなたのコールバックは、いつかあなたの他のコード・ブロックスレッドとそれをキューにありますどのような処理する時間を与えていない特別なときに呼び出される指定された遅延時間以上かかることがあります。

そして、私が言及したように、javascriptはシングルスレッドです。したがって、スレッドを長時間ブロックした場合。

あなたのユーザーがに応答しないページを言ってメッセージを取得することがあり

while(true) { //infinite loop 
} 

このコードのように。