【Javascrpt】setIntervalとsetTimroutの使い方(初心者向け)

JavascrptでのsetIntervalとsetTimroutの使い方を紹介します

Javascriptのタイマー処理で一定時間ごとに特定の処理を行ったり一定時間後に一度だけ特定の処理を行うことができます。

setInterval()：一定時間ごとに特定の処理を繰り返し行う
setTimeout()：一定時間後に一度だけ特定の処理を行う

タイマー処理を開始するときはsetInterval,setTimeoutを使用します。

clearInterval()：setIntervalで開始したタイマー処理を終了する
clearTimeout()：setTimeoutで開始したタイマー処理を終了する

タイマー処理を終了するときはclearInterval、clearTimeoutを使用します

setInterval(関数,時間)
setTimeout(関数,時間)

setInterval(function,1000)

この場合だとfunctionを1秒(1000ミリ秒)ごとに繰り返し行います。

setTimeout(function,1000)

この場合だとfunctionを1秒(1000ミリ秒)後に行います。

よくある間違い

例えば1秒で動かしたい場合は1000と入力しましょう。

setInterval(function(),1000)
setTimeout(function(),1000)

clearInterval(変数)
clearTimeout(変数)

まずはsetIntervalやsetTimeoutを変数に入れてあげましょう。

var interval = setInterval(function,1000)

var timeout = setTimeout(function,1000)

上のコードのようにしましょう。変数(interval、timeout)は何でも大丈夫です。

clearInterval(interval)

clearTimeout(timeout)

上のコードのように()の中に変数を入れてあげることでタイマー処理を終了することができます。

function view(){
console.log("こんにちは");
}

var interval = setInterval(view,1000);

これを実行すると1秒(1000ミリ秒)ごとに「こんにちは」と表示されます。

終了するときは下のコードを入力しましょう。

clearInterval(interval);

これで終了することができます。

function view(){
console.log("こんにちは");
}

var timeout = setTimeout(view,1000);

これを実行すると1秒(1000ミリ秒)後に「こんにちは」と表示されます。

終了するときは下のコードを入力しましょう。

clearTimeout(timeout);

これで終了することができます。

おすすめのJavascript入門本はこちら

最後まで読んでいただきありがとうございました。