setTimeoutの使い方
概要
setTimeoutはとは以下のように、指定時間後に関数を実行するために使われる関数です。
setTimeout(関数名,時間)
デモ
See the Pen setTimeOut by masahiro nomura (@masahiroview) on CodePen.
ボタンクリックで２秒後に、テキストを表示します。
コード解説
$('button').click(function() {
//2秒後にテキストを表示する
setTimeout(showText,2000);
});
function showText(){
$("p").show();
}
JS(jQuery) のコードです。
pタグを表示する関数を作って、setTimeoutしているだけですね。
補足：関数を別途定義しなくても可。
わざわざ別途実行する関数を定義しなくとも、以下のように実装することもできます。
setTimeout(()=>{$("p").show()},2000);
こちら、アロー関数と即時関数を利用しています。
タイマーを解除する：clearTimeout
概要
仕様によっては、一度設定したタイマーを解除するケースもあります。
そのような場合にはclearTimeoutを使います。
コードは下記です。
clearTimeout(id);
このようにidを指定してタイマーを解除するのですが、このidとは何でしょうか。
使い方：setTimeoutの返り値を指定する
実は先ほど解説したsetTimeoutには返り値があります。数値を返します。
id = setTimeout(()=>{$("p").show()},3000);
console.log(id);
//1
このidをcrearTimeoutの引数に指定することでタイマーを解除できます。
デモ
See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.
「表示する」ボタンクリックで3秒後にテキストを表示します。
ただし、待ちの間に「中止する」ボタンをクリックすると表示されなくなります。
表示後に「非表示にする」をクリックするとテキストを非表示にします。
コード解説
//clearTimeout用のID
let id = 0;
//表示ボタンクリックでテキストを表示する
$(".show").click(function() {
id = setTimeout(()=>{$("p").show()},3000);
});
//中止ボタンクリックで表示を中止する
$(".cancel").click(function() {
clearTimeout(id);
});
//テキストを非表示にする
$(".hide").click(function() {
$("p").hide();
});
これまでに解説したコードを組み合わせているだけですね。
変数idは最初に定義しておきましょう。
まとめ
「タイマーを指定する」コード解説はよくありますが、解除についてはあまりみない印象です。
タイマーの制御はウェブ開発には必須となりますので、ぜひ使えるようになっておきましょう。
コメント