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で配列やオブジェクトの一部を代入する分割代入

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

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

JavaScriptでバイナリからpngファイルを識別する

input要素で指定した画像がpngファイルか確認し、pngファイルだった場合にその幅と高さをコンソールに出力しています。 <html> <head> </head&gt …

no image

JavaScriptで値が素数か判定する

以下のコードでは、渡された値が素数か判定する関数isPrimeNumberを定義しています。 Number.isIntegerで引数が整数か判定し、その後1から引数で渡された値の範囲で引数の値を割って …