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

メールアドレスが公開されることはありません。

関連記事

no image

フレキシブルなJavaScriptチャートライブラリTauchartsの使い方

サンプルコード 公式ドキュメントのTutorialsの内、簡易的なものを実際に動かしてみます。https://api.taucharts.com/tutorials/1min.html <htm …

no image

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

公式サイト http://gionkunz.github.io/chartist-js/index.html GETTING STARTEDhttp://gionkunz.github.io/char …

no image

JavaScriptで数値を2進数や16進数の文字列に変換する

toString関数の引数に基数の値を指定すると、その形式に変換された文字列が返されます。基数は2~36までの間で指定可能です。 16進数に変換する この例では30を16進数に変換した1eが出力されま …

no image

JavaScriptで呼び出し回数をカウントする関数Console.count

引数に任意のラベルを指定すると、ラベルごとに呼び出された回数をカウントし、現在の呼び出し回数を出力します。ラベルを省略した場合はラベルにdefaultを指定したものとして扱われます。 Console. …

no image

カルーセルを実装するjQueryプラグインslickの使い方

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。 公式サイト https://kenwheeler.github.io/slick/ ダウン …