web-dev-qa-db-ja.com

JavaScript-n秒ごとに何かを行う

私はJavaScriptにかなり慣れていないので、p5とDaniel ShiffmanのビデオでJavaScriptについて学習しています。

Weather APIをチェックするプログラムを毎分更新する方法を探していたので、自分でページを更新する必要はありませんでした。

ここにはすでにこの質問への回答があることは承知していますが、私はJSに非常に慣れていないため、どれも私には意味がありません。

したがって、ELI5（「私は5歳のように説明してください」）の説明で答えることができれば、すばらしいでしょう。

javascripthtmlintervals
6
Zachary Elkins

setInterval()が最も簡単なオプションです。

この簡単な例を見てみましょう：

// Will execute myCallback every 0.5 seconds 
var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
 // Your code here
}

詳細と例はここにあります： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval （ https：// developer .mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval ）

17
sidewalksalsa

単純なバニラJavaScriptでは、setIntervalを使用します。

var intervalID = window.setInterval(checkWeatherAPI, 60000);

function checkWeatherAPI() {
  // go check API 
  console.log("checking weather API");
}

上記を実行すると、コールバック関数のcheckWeatherAPIが毎分1回、つまり60,000ミリ秒永久に実行されます。完全なドキュメントはこちら： WindwTimers.setInterval

間隔を停止するには、次の行を実行します。

window.clearInterval(intervalID);
3
Keno

setInterval OR setTimeoutかどうかの選択は、以下の違いについて少し説明するように、ニーズと要件に基づいています。

setIntervalは、APIにかかる時間に関係なく呼び出されます。 5秒ごとにAPI呼び出しを設定し、ネットワークレイテンシまたはサーバーレイテンシのためにAPI呼び出しに6秒かかるインスタンスの場合、以下のsetIntervalは、最初のAPIが完了する前に2番目のAPI呼び出しをトリガーします。

var timer = setInterval(callAPI, 5000);

function callAPI() {
  // TO DO
  triggerXhrRequest(function(success){

  });
}

代わりに、最初のAPI呼び出しが完了してから5秒後に別のAPI呼び出しをトリガーする場合は、以下のようにsetTimeoutを使用することをお勧めします。

var timer = setTimeout(callAPI, 5000);

function callAPI() {
  // TO DO
  triggerXhrRequest(function(success){
      timer = setTimeout(callAPI, 5000);
  });
}

setTimeoutはnth秒後に一度呼び出されます。したがって、次の呼び出しが上記のように呼び出されるタイミングを制御できます。

MDNドキュメント

setTimeout

setInterval

1
Aruna
function doThings() {
   //the things i want to happen (or increment)
}

setTimeout(function() {
    doThings();
}, 1000);//milliseconds
0
MrEhawk82