みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回は定期実行を行うsetIntervalとそれを停止するclearIntervalについて学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- setIntervalで定期実行処理が作れる
- clearIntervalで定期実行処理をストップ出来る
定期実行をマスターしよう！
最後に汎用的にコピペで使えるコードもおいているよ！
最後に汎用的にコピペで使えるコードもおいているよ！
定期実行処理を作ろう
setIntervalの構文
setInterval(() => {
// ここに繰り返したい処理を記述
}, 実行間隔※ミリ秒);これだけで定期実行処理が作れるよ！
実際に動かしてみよう
setInterval(() => {
console.log("こんにちは、サメハックです！");
}, 1000);【出力結果】
こんにちは、サメハックです！
こんにちは、サメハックです！
こんにちは、サメハックです！
こんにちは、サメハックです！
（略）1秒毎にログが出力されるよ！
定期実行処理を止めよう
crearIntervalの構文
引数なし
clearInterval()引数あり
clearInterval(インターバルID)実際に動かしてみよう
setInterval(() => {
console.log("こんにちは、サメハックです！");
clearInterval()
}, 1000);【出力結果】
こんにちは、サメハックです！1回目の処理でclearIntervalが実行されたので
setIntervalによる定期実行が停止されたよ！
setIntervalによる定期実行が停止されたよ！
コピペ用コード
今回はコピペで使えるように、
定期実行を開始する関数と定期実行を停止する関数を用意しました。
前述したとおりclearIntervalにインターバルIDを渡すことで
指定した定期実行処理を好きなタイミングで停止することが出来ます。
// 1秒ごとに実行
const INTERVAL = 1000;
// setIntervalの戻り値を取得
let intervalId = null;
/**定期実行 */
const start = () => {
intervalId = setInterval(() => {
// ここに繰り返したい処理を記述
console.log("実行します");
}, INTERVAL);
// 0以外の整数が格納される
console.log("intervalId : ", intervalId);
};
/**
* setIntervalを止める
* @param {number} id intervalId
*/
const stop = (id) => {
clearInterval(id);
};
start();
// 任意のタイミングでstopを実装してください
// stop(intervalId);現場でも使えるようにしたので、ぜひ使ってみてね！
まとめ
- setInterval → 定期実行を開始
- clearInterval → 定期実行を停止
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
