4.2 時間間隔執行

在 javascript/practice 資料夾下，建立 time_period.html 來練習。

setTimeout()

隔指定的毫秒數，然後指定第一個函式參數裡的程式：

寫法一：

console.log("程式一");
console.log("程式二");
console.log("程式三");

setTimeout(function(){
  console.log("程式四");
  console.log("程式五");
}, 5000); // 5 秒之後，執行第一個函式參數裡的程式。

console.log("這裡的程式");

寫法二：

console.log("程式一");
console.log("程式二");
console.log("程式三");

function other_func(){
  console.log("程式四");
  console.log("程式五");
}

setTimeout(function(){
  other_func();
}, 5000);

setInterval()、clearInterval()

每隔幾秒，就執行某段程式。

例 1：每隔三秒，就執行函式裡的程式：

setInterval(function(){
  console.log("執行");
}, 3000);

例 2：回傳 id：

var interval_id = setInterval(function(){
  console.log("執行");
}, 3000);
console.log(interval_id);

如果要讓 setInterval() 的停止執行的話，就找時機點執行：

clearInterval(interval_id);

例 3：試著執行以下並解讀：

var i = 0;

var interval_id = setInterval(function(){
  
  console.log("執行");
  i++;
  if(i == 5){
    clearInterval(interval_id);
    console.log("停止執行");
  }
  
}, 3000);

console.log("interval 的 id：" + interval_id);