JavaScript Day22 - setTimeout、setInterval

setTimeout

• setTimeout：定时器，只执行一次，属於非同步，因此就算设定 0 秒执行，还是会先执行原本的程序码才去执行 setTimeout 内的 function 内容，参考下面的例子的显示顺序
• 语法：setTimeout(function,delay)
  • function：时间到後想要执行的函式内容
  • delay：单位为毫秒(1 秒 = 1000 毫秒)，若不写预设为 0，直接执行

console.log(1); // 1

//非同步执行，不管几秒，先执行 2 後才会是 3、4
setTimeout(() => console.log(3), 0) // 3
setTimeout(() => console.log(4), 3000) // 4
    
console.log(2); // 2

setInterval

• setInterval：定时器，会不断重复执行，属於非同步
• 语法：setInterval(function,delay)
  • function：想要重复执行的函式内容
  • delay：单位为毫秒(1 秒 = 1000 毫秒)，若值 < 10，则设定为 10

setInterval(( () => console.log("Hi") ), 1000);

function 参数

• 在第一个参数 function 的部分是可以直接打 code 的，但是需要是字串，会透过 eval 转换，怕安全性问题还是会建议使用 function
• 若无变成字串，则那段 code 会直接执行，而无定时或重复的功能

setTimeout('console.log("1 秒後执行 console")', 1000);
setTimeout(console.log("直接执行 console"), 1000);

function a() {
  console.log("a");
}

function b() {
  console.log("b");
}

setTimeout('a()', 3000) // 3 秒後出现 a
setTimeout(b(), 5000) // 直接出现 b
setTimeout(b, 5000) // 5 秒後出现 b

取消

• clearTimeout(timeoutid)：将设定的 setTimeout() 回传的 id 放入，在执行前 (delay) 即可取消
• clearInterval(intervalid)：将设定的 setInterval() 回传的 id 放入

let timeoutid = setTimeout(( () => console.log("timeout") ), 5000);
let intervalid = setInterval(( () => console.log("Hi") ), 2000);

clearTimeout(timeoutid);
clearInterval(intervalid);

参考资料

MDN window.setTimeout
MDN window.setInterval
谈谈 JavaScript 的 setTimeout 与 setInterval
JavaScript setTimeout(), setInterval()
[javascript] 深入了解 setTimeout() 与 setInterval() 的不同之处
JS 原力觉醒 Day26 - 常用 API： setTimeout / setTimeInterval

次回

找灵感，思考中....