【JavaScript】setTimeoutとsetintervalで実行処理のタイミングをタイマーで操る

2020年10月28日JavaScript

javascript

タイマー

JavaScriptではタイマーを実行して処理のタイミングを任意のタイミングを操ることができます。
タイマーには二つの種類があります。

  • setTimeout：任意の時間後に処理を実行する。
  • setInterval：任意の時間毎に処理を繰り返し実行する。

example

それでは実際にタイマーの実行を見ていきましょう。
コードの完コピもokなので参考に使ってみてください。

setTimeoutのセット

setTimeoutでは第一引数に実行処理、第二引数に実行する時間を指定します。

setTimeout(() => { 
　　//処理
}, 実行させたいミリ時間);

実行時間はms(ミリ秒)で指定します。※1000ミリ = 1秒

setTimeout(() => {
    console.log('test');
}, 1000);

第一引数の関数は「()」を不要です。

※間違えないようにしましょう。

var example = function() {
    alert('test');
};

 
setTimeout(example, 1000);

setIntervalのセット

setTimeoutの時同様で、setIntervalでも第一引数に実行処理、第二引数に実行する時間を指定します。

setIntervalはストップさせない限り実行され続けるので覚えておきましょう。

setInterval(() => { 
   //処理
}, 繰り返し実行させたいミリ時間);

setInterval内で繰り返し実行したい処理をします。

setInterval(() => { 
　　console.log('test');
}, 1000);

直接タイマー内に書かずに、関数を呼び出してタイマーを動かすこともできます。

var example = function() { 
    alert('test');
}; 
  
setInterval(example, 1000);

スポンサードサーチ

タイマーのストップ

タイマーのセットを各タイマーキャンセルでタイマーを止めることができます。

  • clearTimeout：setTimeoutで設定したタイマーを止める。
  • clearInterval：setIntervalで設定したタイマーを止める。

タイマーを止めるには、引数にタイマーをセット時の戻り値を指定します。

//setTimerのタイマーを止める
cleartimeout(example);
　　
//setIntervalのタイマーを止める
clearinterval(example);

もしタイマーが止まらない時は、下記記事を参考にしてくださいね。


JavaScriptJavaScript

Posted by kami