JavaScriptで待機時間を操作する！1秒待つ、1秒後に実行、1秒ごとに実行の方法を完全解説
はじめに
JavaScriptはウェブページを動的に操作するためのプログラミング言語です。
今回は、JavaScriptで時間を制御する方法、特に「1秒待つ」、「1秒後に実行」、「1秒ごとに実行」の3つの操作について詳しく解説します。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
JavaScriptで1秒待つ
JavaScriptには時間を制御するための機能があります。
その中でも特に基本となるのが「setTimeout」関数です。
この関数を使うと、指定した時間だけ処理を遅らせることができます。
ソースコード例
|
1 2 3 4 5 |
console.log('Start'); setTimeout(function() { console.log('1秒後'); }, 1000); console.log('End'); |
このコードでは、まず「Start」と表示した後、1秒（1000ミリ秒）後に「1秒後」と表示します。
setTimeout関数の後にある「End」という文字列は、1秒待つ前に表示されます。
出力結果
Start
End
1秒後
JavaScriptで1秒後に実行
「setTimeout」関数は指定した時間後に特定の処理を実行するために使われます。
これを使えば、「1秒後に実行」も可能です。
ソースコード例
|
1 2 3 4 5 |
console.log('Start'); setTimeout(function() { console.log('1秒後に実行'); }, 1000); console.log('End'); |
このソースコードも「1秒待つ」の例と同様に、1秒後に特定の処理（ここでは「1秒後に実行」を出力）を行います。
setTimeout関数は処理を遅らせるだけでなく、特定のタスクを指定した時間後に実行することもできます。
出力結果
Start
End
1秒後に実行
JavaScriptで1秒ごとに実行
そして最後に、「1秒ごとに実行」を行う方法です。
これは「setInterval」関数を使用します。
ソースコード例
|
1 2 3 4 5 6 7 8 |
let count = 0; let intervalId = setInterval(function() { console.log(`経過時間：${++count}秒`); if (count >= 5) { clearInterval(intervalId); console.log('終了'); } }, 1000); |
このソースコードでは、1秒ごとに経過時間を出力します。
そして経過時間が5秒以上になったら、setInterval関数を停止して「終了」と表示します。
出力結果
経過時間：1秒
経過時間：2秒
経過時間：3秒
経過時間：4秒
経過時間：5秒
終了
まとめ
今回は、JavaScriptで「1秒待つ」、「1秒後に実行」、「1秒ごとに実行」の3つの操作について解説しました。
これらの操作は、ウェブサイトの動的な操作やアニメーション、タイマーやカウントダウンなど、さまざまな場面で利用することができます。
JavaScriptの時間制御はこれだけではありませんが、これらの基本的な操作を理解していれば、より複雑な操作も可能になります。
JavaScriptの時間制御を理解し、コーディングに活かしてみてください。
これらの操作は初めての人にとっては難しいかもしれませんが、理解すれば非常に便利なツールになります。
ぜひチャレンジしてみてください！
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
