JavaScript
インターバルとタイムアウト

構文

• timeoutID = setTimeout（function（）{}、ミリ秒）
• intervalID = setInterval（function（）{}、ミリ秒）
• timeoutID = setTimeout（function（）{}、ミリ秒、パラメータ、パラメータ、...）
• intervalID = setInterval（function（）{}、ミリ秒、パラメータ、パラメータ、...）
• clearTimeout（timeoutID）
• clearInterval（intervalID）

備考

インターバル

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

間隔を削除する

window.setInterval()はIntervalID window.setInterval()返します。このIntervalID window.setInterval()使用すると、そのインターバルの実行を停止できます。これを行うには、 window.setInterval()戻り値を変数に格納し、その変数を唯一の引数としてclearInterval()を呼び出します。

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

これはログThis will be logged every 5 secondsごとに5秒ごとにThis will be logged every 5 secondsが、32秒後にThis will be logged every 5 seconds 。したがって、メッセージを6回記録します。

タイムアウトの削除

window.setTimout()はTimeoutID返します。このタイムアウトTimeoutID使用して、タイムアウトの実行を停止できます。これを行うには、 window.setTimeout()戻り値を変数に格納し、その変数を唯一の引数としてclearTimeout()を呼び出します。

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

これは、タイマーが3秒後に停止するため、メッセージを記録しません。

再帰的なsetTimeout

関数を無限に繰り返すために、 setTimeoutは再帰的に呼び出すことができます：

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

setIntervalとは異なり、関数の実行時間が指定された遅延より長い場合でも、関数が確実に実行されます。ただし、関数実行間の定期的な間隔を保証するものではありません。この動作は、 setTimeoutの再帰呼び出しの前の例外が繰り返しを繰り返さないようにするため、 setIntervalは例外に関係なく無期限に繰り返されるため、変化します。

setTimeout、操作の順序、clearTimeout

setTimeout

• 指定されたミリ秒数の待機後に関数を実行します。
• 関数の実行を遅らせるために使用されます。

構文： setTimeout(function, milliseconds)またはwindow.setTimeout(function, milliseconds)

例：この例では、1秒後にコンソールに「hello」を出力します。 2番目のパラメータはミリ秒単位であるため、1000 = 1秒、250 = 0.25秒などです。

setTimeout(function() {
    console.log('hello');
}, 1000);

setTimeoutに関する問題

forループでsetTimeoutメソッドを使用している場合：

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

値3 three回出力されますが、これは正しくありません。

この問題の回避策：

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

この出力は以下となり値が0 、 1 、 2 。ここでは、 iをパラメータ（ j ）として関数に渡します。

オペレーションの順序

さらに、Javascriptがシングルスレッドでグローバルイベントループを使用するため、 setTimeoutを使用して、ゼロ遅延でsetTimeoutを呼び出して実行キューの最後に項目を追加することができます。例えば：

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

実際に出力されます：

hello
world

また、ここで0ミリ秒は、setTimeout内の関数がすぐに実行されることを意味しません。実行キューに残って実行される項目に応じて、それよりわずかに多くなります。これはちょうどキューの最後にプッシュされます。

タイムアウトのキャンセル

clearTimeout（）： setTimeout()指定された関数の実行を停止します。

構文： clearTimeout（timeoutVariable）またはwindow.clearTimeout（timeoutVariable）

例：

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed

インターバル

標準

変数を作成する必要はありませんが、clearIntervalでその変数を使用して現在実行中の間隔を停止することができるので、良い方法です。

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

doSomething関数にパラメータを渡す必要がある場合は、それらを最初の2つを超える追加パラメータとしてsetIntervalに渡すことができます。

重複しない

上記のように、setIntervalは、何があっても5秒ごとに（または何に設定しても）実行されます。関数doSomethingが実行するのに5秒以上かかる場合でも。それは問題を引き起こす可能性があります。 doSomethingの実行の間に一時停止があることを確認したいだけなら、これを行うことができます：

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()