本記事では、JavaScriptを使ってn秒経過した後に特定の処理を実行する方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/javascript-1.jpg)
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
setTimeOutメソッド
n秒処理を遅らせるには「setTimeoutメソッド」を使用します。基本的な使い方は以下のとおりです。
setTimeout(function, delay);
- function:実行させたい処理を記述
- delay:処理の遅延時間をミリ秒 (1/1000 秒) 単位で指定。3秒遅らせて処理を実行させたい場合は「3000」を指定する。
サンプルコード
setTimeOutメソッドを使ってサンプルコードを用意しました。内容は3秒後にアラートが出現する簡単なものです。
/* 関数を分ける記述 */
const viewAlert = () => alert('3秒経ちました!');
setTimeout(viewAlert, 3000);
/* 関数をまとめて記述 */
setTimeout(()=> {
alert('3秒経ちました!');
},3000);
お手元のPCで上記サンプルコードを実行すると、3秒後に「3秒経ちました!」と記述されたアラートが出現することが確認できます。
![表示結果](https://web-engineer-wiki.com/wp-content/uploads/2023/01/settimeout01.jpg)
![表示結果](https://web-engineer-wiki.com/wp-content/uploads/2023/01/settimeout01.jpg)
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【JavaScript】setTimeoutを途中でキャンセルする方法
本記事では、setTimeoutメソッドで遅延させている処理を途中でキャンセルする方法を解説しています。 この方法を覚えることで、特定の条件に満たしている場合は遅延処理…