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チャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

JavaScriptでコンソールにデータを表形式で表示する関数Console.table

以下のように引数にオブジェクトを渡すと、その内容を表形式でコンソールに出力することができます。 console.table(["value1", "value2& …

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

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

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

no image

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

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