3テラバイト

プログラム関連備忘録サイト。主にゲーム。

JavaScript

JavaScriptで指定時間ごとに処理を実行する

投稿日:

指定時間ごとに処理を実行する

setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。

以下の例では関数callbackFuncを1000ミリ秒(1秒)ごとに実行しています。

コンソールに1秒ごとにcallbackFuncと表示されます。

setInterval(callbackFunc, 1000);

function callbackFunc() {
  console.log("callbackFunc");
}

指定時間ごとに実行している処理をキャンセルする

setInterval関数で指定時間経過ごとに実行しているのをキャンセルすることもできます。

setInterval関数は処理を識別するためのIDを返却するため、それを受け取り、clearInterval関数の引数に渡すとその処理の実行をキャンセルすることができます。

以下の例では1秒ごとにcallbackFunc関数が実行されコンソールにcallbackFuncという文字列が出力されますが、同時にcounter変数をインクリメントし、counterが5以上になった段階で処理をキャンセルしています。

コンソールにはcallbackFuncという出力が5回された以降は何も出力されなくなります。

var intervalID = setInterval(callbackFunc, 1000);
var counter = 0;

function callbackFunc() {
  console.log("callbackFunc");
  counter++;
  if(counter >= 5) {
    clearInterval(intervalID);
  }
}

リンク

WindowOrWorkerGlobalScope.setInterval() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

-JavaScript


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

公式サイト Plotly JavaScript Graphing Library | JavaScript | Plotlyhttps://plotly.com/javascript/ サンプルコード …

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

JavaScriptでMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)