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

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

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

no image

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

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

no image

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

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

no image

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

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

no image

JavaScriptでMath.jsを用いて組み合わせの数の計算をする

math.combinations関数の第一引数に総数を、第二引数に取り出す数を渡すと、組み合わせの数が返されます。 <html> <head> <script type …