JavaScvriptでは、一定時間「毎」や、一定時間「後」にイベントを発火させることができます。
ここの文字色が1秒ごとに変わるよ！
ページを更新すると1秒後に文字色が変わるよ！
僕自身実際の現場では、一定時間後は使ったことはありません。
一定時間毎も、時刻の表示やカウントアップで使ったことがある程度で、おそらくどちらもさほど登場回数は多くないかと思います。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
一定時間「毎」にイベント発火
setInterval
さて、まずは一定時間毎にイベントを発火させる方法です。
一定時間毎は、setIntervalというものを使います。
setInterval(関数, ミリ秒);第一引数に関数、第二引数に間隔となるミリ秒を記入することで、「ミリ秒」毎に「関数」を実行するようになります。
1000ミリ秒 ＝ 1秒
なので、1秒毎の場合は1000と記入します。
サンプルコード
1秒毎に文字の色が変わります。
<style>
.intervalSample{
transition: color 1s;
}
.red{
color: red;
}
</style>
<p class="intervalSample">ここの文字色が1秒ごとに変わるよ！</p>
<script>
const intervalSample = document.querySelector('.intervalSample');
setInterval(() => {
if(!intervalSample.classList.contains('red')){
intervalSample.classList.add('red');
}else{
intervalSample.classList.remove('red');
}
}, 1000);
</script>classList.add(.remove)について分からない方はこちら
classList.containについて分からない方はこちら
constについて分からない方はこちら
()=>{}（アロー関数）について分からない方はこちら
ifについて分からない方はこちら
せっかくなので、カウントアップも体験してみましょう！
カウントアップ
0.01秒毎に数を刻んでいき、151になった時点でカウントが止まります。
<p class="countUpArea"></p>
<script>
const countUpArea = document.querySelector('.countUpArea');
const countup = (target, interval, stopNum) => {
let count = 0;
const countUpFunc =
setInterval(() => {
target.textContent = count;
count++;
if(count > stopNum){
clearInterval(countUpFunc);
};
}, interval);
}
countup(countUpArea, 10, 151);
</script>clearIntervalを使うことで、指定のタイミングでsetIntervalを終了させることができます。
一定時間「後」にイベント発火
さて、こちらは実際の現場で使ったことはないのですが、一定時間後にイベントを発火させる方法です。
setTimeout(関数, ミリ秒);先ほどの一定時間毎と似ていて、第一引数に関数、第二引数に間隔となるミリ秒を記入することで、「ミリ秒」後に「関数」を実行するようになります。
サンプルコード
ウィンドウの読み込みが完了してから、1秒後に文字色が変わります。
<style>
.timeoutSample{
transition: color .5s;
}
</style>
<p class="timeoutSample">ページを更新すると1秒後に文字色が変わるよ！</p>
<script>
const timeoutSample = document.querySelector('.timeoutSample');
window.addEventListener('load', ()=>{
setTimeout(function(){
timeoutSample.style.color = 'red';
}, 1000);
});
</script>
