JavaScript
PC SAURUS

JavaScript　数秒後に処理を実行イベント　alert編（setTimeout、setInterval）

JavaScriptでは様々なイベント処理があります
クリックした時に起こるイベント、スクロールした時に出てくるボタン、許可しない時に出てくる警告アラート...etc
その中でも今回は『（なんらかのイベント後）数秒後に出てくるalert処理』のコードを紹介します

早速コード書いちゃいましょう！

2秒後に発生するalertイベント

<!DOCTYPE html>
<html>
  <head>
    <title>alertイベント</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="btn">Hello</button>
    <script src="src/index.js"></script>
  </body>
</html>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    window.setTimeout(function(){
        alert('World');
    }, 2000);
});

無名関数で書くとこうなります

document.getElementById("btn").onclick = function() {
setTimeout(function(){
alert("2秒経過")
},2000)
}

はい！これでボタンをクリックしたら2秒後にアラートが表示されます

3秒後にイベント処理するするには3000、5秒後にイベント処理するには5000と書き直します

javascriptチュートリアル　固定ページ

setTimeout()

基本的な記述方法　setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, …])

setTimeout(function ,   [     , delaytime])

setTimeout()は指定時間後に関数を呼び出すイベント処理です

sample1
setTimeout('alert("Hello, world!")', 5000);   //5秒後にアラートイベント
sample2
setTimeout(function(){console.log("Hello, world!")},5000);

このようにも記述できますが、もっとスッキリさせたいので...

let fn = function() {
  console.log("Hello, world!");
};
let time = 5000;
setTimeout(fn,time);

変数を使用すると可読性も上がりスッキリします！♪(´ε｀ )

setInterval()

基本的な記述方法　setInterval(関数function, 一定時間の指定[, 引数1, 引数2, …])

sample3
let count = 0;
  const countUp = () => {
    console.log(count++);
  }
  setInterval(countUp, 1000);

これでは永遠にカウントされてしまうのでストップ処理を加えます

let count = 0;
  const countUp = () =>{
    console.log(count++);
  }
  const intervalId = setInterval(() =>{
    countUp();
    if(count > 10){　
      clearInterval(intervalId);　
    }}, 1000);

clearIntervalを使用し、カウントが10になったら止まるようなイベント処理を作ります

javascript MDN

おすすめの記事