初学者の方の難敵の一つに「非同期処理」というものがあります。
そもそも考え方が難しいですし、学習教材やスクールでは同期処理をメインに学ぶからですね。
とはいえ近年のサイトやアプリでは非同期処理やそれに近い処理は当たり前のように要求されるので、どこかで必ず理解しておく必要があるのも事実です。
ちなみにJavaScriptにはsetTimeoutとsetIntervalという非同期処理を手軽に理解するのに打ってつけの関数が用意されていて、自分もこちらから始めたことで非同期処理がスムーズに頭に入った経験がありましたので紹介して行こうと思います。
また動画もあるので必要に応じて活用してください。
JavaScriptにおけるsetTimeoutの使い方
まずsetTimeoutという関数を紹介します。
こちらの関数は簡単に言うと「〇〇だけ時間が経過したら▲▲の処理を実行する」と言うものです。
使い方は以下のような形です。
setTimeout(test, 3000);
function test() {
console.log("test");
}
// 3秒後に「test」と出力されるsetTimeoutは引数を二つ取り、第一引数には「時間経過後に実行したい処理」、第二引数には「経過させたい時間」です。
ちなみに第二引数の時間については「1秒＝1,000」といった換算を行うルールになっていて、上記のコードの場合だと3000なので3秒という形です。
日常生活では使わない換算ですが、プログラムの世界のルールになっています。
上記のコードに別の処理を追加してみたいと思います。
setTimeout(test, 3000);
function test() {
console.log("test");
}
// ここを追加
console.log("hello");
// 「hello」と出力されて、3秒後に「test」と出力されるconsole.log(“hello”)を下の行に追加しました。
プログラムの一般的な考えとしては「上から順番に実行する」といった具合なんですが、最初に書いたsetTimeoutの動きの影響でコンソールログに出力される順番が逆になります。
あえて順番通りに実行させない動作を作る、ザックリですがこれが非同期処理の考え方になります。
コールバック関数の書き方
setTimeoutのように「何かを待ってから実行する関数」のことをコールバック関数と呼んだりします。
コールバック関数というと慣れない言葉ですが、普通の関数と同じだと思って大丈夫です。
ただJavaScriptの場合、関数の書き方にパターンがあるようにコールバック関数にも書き方に種類があります。
// ①通常関数の書き方をするコールバック関数
setTimeout(test, 3000);
function test() {
console.log("test");
}
// ②無名関数の書き方をするコールバック関数
setTimeout(function () {
console.log("test");
}, 3000);
// ③アロー関数の書き方をするコールバック関数
setTimeout(() => {
console.log("test");
}, 3000);JavaScriptの関数の書き方に自信がない方は、過去に詳しく解説しているので良ければ確認して見てください。
setTimeoutをキャンセルするclearTimeoutの使い方
setTimeoutは自分で決めた時間が経過したら処理を実行するのですが、時間が経っても処理を実行させない関数もJavaScriptには用意されています。
const result = setTimeout(test, 3000);
function test() {
console.log("test");
}
clearTimeout(result);
// 3秒経っても何も出力されないclearTimeoutという関数を使うと、setTimeoutで作ったコールバック関数を止めることができます。
使い方はclearTimeoutの引数にsetTimeoutのIDを指定します。
「setTimeoutのID」とは何のことでしょうか？
上記のコードの１行目に注目すると、setTimeoutを定数resultに格納しているのが分かります。
試しにresultをコンソールで見てみます。
const result = setTimeout(test, 3000);
function test() {
console.log("test");
}
// ここを追加
console.log(result); // 1と出力される
〜省略〜コンソールには数字の「1」が出力されました。
こちらがsetTimeoutのIDになります、言葉通り特定するための連番のようなものです。
上記のコードではシンプルな作りになっていますが、もしもsetTimeoutが10個書かれていたらclearTimeoutから見た時に「どのsetTimeoutを止めるんだ？」となるからです。
JavaScriptにおけるsetIntervalの使い方
続いてsetIntervalについて紹介します。
こちら簡単に言うと「〇〇の間隔で▲▲を繰り返し実行する」というものです。
setInterval(test, 1000);
function test() {
console.count("test");
}
// 1秒ごとに「test」が出力され続けるsetIntervalも二つの引数を取って、第一引数に「繰り返したい処理」、第二引数に「繰り返す間隔」となります。
第二引数の時間はsetTimeout同様に「1秒＝1,000」の換算です。
上記のコードでは「test」と言う文字が1秒ごとにコンソールに出力され続けます。
こちらもコールバック関数の書き方は以下のように3パターンの書き方になるでしょう。
// ①通常関数の書き方をするコールバック関数
setInterval(test, 1000);
function test() {
console.count("test");
}
// ②無名関数の書き方をするコールバック関数
setInterval(function () {
console.count("test");
}, 1000);
// ③アロー関数の書き方をするコールバック関数
setInterval(() => {
console.count("test");
}, 1000);setIntervalをキャンセルするclearIntervalの使い方
setIntervalは一度実行し始めるとコールバック関数が永遠に動き続けます。
JavaScriptではclearIntervalという関数を使うとsetIntervalの動きを止めることができます。
const result = setInterval(test, 1000);
function test() {
console.count("test");
}
clearInterval(result);
// 1秒経っても「test」と出力されないsetTimeout同様にsetIntervalも定数に格納することで、定数が「setIntervalのID」として使うことができます。
clearIntervalの引数にsetIntervalのIDを入れることで、setIntervalの動作を止めてくれます。
上記のコードだと開始して止めているのですが、「10回繰り返してから止める」なんてことも条件分岐などと組み合わせて実現できますね。
setTimeoutとsetIntervalを紹介してプログラムの少し変わった動作を体験してもらえたんじゃないでしょうか？
実際の非同期処理では「Promise」「catch」など専門用語がたくさん登場するのですが、大体が今回紹介した「〇〇が終わってから」「▲▲を止める」など自分でプログラムの動作の順番をコントロールする目的で用意されています。
setTimeoutとsetIntervalを知っておくと、専門用語が来てもイメージがしやすいはずなので今日の内容は慣れるまで何回も練習してみてくださいね。