window.setTimeout與window.setInterval
概念：window.setTimeout()是一個定時器，該定時器在定時器到期後執行一個函數或指定的一段代碼。返回一個 timerID。window.setInterval()是一個間斷執行的定時器，可以叫間隔器，是重複調用一個函數或執行一個代碼段，在每次調用之間具有固定的時間延遲。返回一個 intervalID。通過clearTimeout與clearInterval可以分別清除定時器和間隔器，從而停止執行。
使用方式：
setTimeout (表達式, 延時時間)
setInterval(表達式, 交互時間)
延時時間/交互時間是以豪秒為單位的(1000ms=1s)
兩者區別：
setTimeout()方法是在等待指定時間後執行函數內容, 且只執行一次傳入的表達式。
setInterval()方法是每指定間隔時間後執行一次傳入的表達式,循環執行直至關閉窗口或clearInterval()。
setTimeout用於延遲執行：
let x = 1;
setTimeout(() => x++, 0);
console.log(x);
若在控制檯輸出，也就是異步調用時會獲得2
setInterval用於間隔執行:
let x = 1;
var interval1 = setInterval(() => x++, 1000);
console.log(x);
若異步調用時，每個1秒會發現x增1
下面是一些例子，如果能你能理解其中的意思，那麼就可以說會用了。
1. 簡單例子
let a = 1;
let timerId = setTimeout(function() {
a++;
console.log('inner:', a);
},0);
console.log('outer:', a);
2. 延遲執行
let i = 0;
while(i < 10) {
setTimeout(function() {
console.log(i);
}, 1);
i++;
}
3 .串行改並行執行
let data = [];
for(let i = 0; i <= 999; i++) {
data[i] = {
number: Math.random()
}
};
for (let item of data) {
console.time();
setTimeout(function() {
item.number += 1;
}, 0);
setTimeout(function() {
item.id = 'id:' + item.number;
}, 0);
console.timeEnd();
}
// 當數據操作步驟太複雜，步數太多時，可以讓一些操作異步來執行，這樣瀏覽器不至於阻塞於此而卡死，可以把同步變異步延遲下計算，這樣可以解決複雜運算問題。也可以利用Promise來實現類似功能
4. 移開浮層關閉
ele.addEventListener('click', function() {
setTimeout(
function() {
$ele.hide();
}
, 500)
}, false);
// 這是延遲執行與DOM結合的例子，不想讓事件執行後馬上得到結果，而是延遲一段時間之後執行。
4. DOM動畫
var interval2 = setInterval(function() {
if (ele.style.left < screen.width) {
ele.style.left = ele.style.left + 10 + 'px';
} else { clearInterval(interval2); }
}, 20);
// JS做動畫就離不開定時器和間隔執行器。相比來講，動畫用間隔較好，但是要記住滿足條件後清除掉間隔器。
// 這裡只是示例用法，真實動畫需要自己微調
5. 測驗題，結合作用域，看下你能回答正確並能說出結果以及順序的原因來嗎？
test1:
function callback(a){
return function(){
alert("Hello " + a);
}
}
let a = "world";
setTimeout(callback(a), 1000);
a = "你好";
test2:
function callback(a){
return function(){
alert("Hello " + a);
}
}
let a = "world";
setTimeout(function() {
callback(a)();
}, 1000);
a = "你好";
如果你都能回答正確，那麼setTimeout與setInterval用法就全掌握了哦。
關鍵字: DOM setInterval 定時器
