一、定時(shí)器
js的定時(shí)器主要有setTimeout和setInterval兩個(gè)，下面我們分別講講蜕径。
1. setTimeout
setTimeout()設(shè)置任務(wù)延遲多久之后才執(zhí)行泵督，該函數(shù)第一個(gè)參數(shù)可以是可執(zhí)行語句（字符串形式）或者一個(gè)函數(shù)歉糜，第二個(gè)參數(shù)是延遲的毫秒數(shù)（若省略則默認(rèn)為0）宪卿，后續(xù)的參數(shù)則代表第一個(gè)函數(shù)的參數(shù)的诵。
// 下面兩者一樣
setTimeout('console.log(666)',1000);
setTimeout(function() {
console.log(666);
}, 1000);
setTimeout('console.log(666)'); // 相當(dāng)于setTimeout('console.log(666)', 0);
setTimeout(function(a, b) {
console.log(a + b); // 3
}, 1000, 1, 2);
其中有兩點(diǎn)要注意（具體原因可以看這篇文章）：
- 函數(shù)里面的this指向的是全局，因?yàn)橘x值的是函數(shù)的地址佑钾，執(zhí)行的時(shí)候是從任務(wù)隊(duì)列取出來在主執(zhí)行棧中全局調(diào)用西疤。
var obj = {
y: function () {
console.log(this);
}
};
setTimeout(obj.y, 1000) // window
- 定時(shí)器設(shè)置的毫秒數(shù)是理想情況下多少毫秒后執(zhí)行，但實(shí)際情況下是可能多于該毫秒數(shù)之后才執(zhí)行休溶。因?yàn)殡m然數(shù)完秒就放到任務(wù)隊(duì)列代赁，但要等主執(zhí)行棧為空了才會(huì)去調(diào)用這些任務(wù)隊(duì)列的回調(diào)函數(shù)。
// 下面的雖然寫了1s后執(zhí)行輸出666兽掰，但實(shí)際卻要3s后才執(zhí)行輸出666
setTimeout('console.log(666)', 1000);
function execTime(t) {
var start = Date.now();
while(Date.now() - start < t) {}
}
execTime(3000);
2. setInterval
setInterval與setTimeout用法和注意點(diǎn)基本差不多芭碍，他主要用于設(shè)置時(shí)間間隔，每隔多少毫秒之后重復(fù)執(zhí)行任務(wù)孽尽，直到瀏覽器關(guān)閉或手動(dòng)清除窖壕。
實(shí)際上，兩次函數(shù)執(zhí)行的間隔時(shí)間也不是所設(shè)定的毫秒數(shù)杉女，而是小于執(zhí)行的毫秒數(shù)的瞻讽，比如設(shè)置了100ms，第一次函數(shù)執(zhí)行用了10ms熏挎，那么間隔90ms之后第二次執(zhí)行函數(shù)速勇；如果第一次函數(shù)執(zhí)行用了110ms，那么函數(shù)執(zhí)行完畢之后會(huì)立馬執(zhí)行第二次函數(shù)坎拐。那如果要固定間隔時(shí)間執(zhí)行某函數(shù)烦磁，可以用setTimeout來模擬。
var timer = setTimeout(function f() {
// ...
timer = setTimeout(f, 2000);
}, 2000);
3. 清除定時(shí)器
setTimeout和setInterval生成的都是計(jì)數(shù)器編號哼勇，從0開始都伪，將對應(yīng)的編號傳入clearTimeout和clearInterval就可以清除對應(yīng)的定時(shí)器。
var a = 0;
var timer = setInterval(function() {
console.log(a++); // 輸出0积担、1就停了
if (a===2) {
clearInterval(timer);
}
}, 1000);
當(dāng)瀏覽器的標(biāo)簽頁打開之后院溺，每生成一個(gè)定時(shí)器都是從上一個(gè)編號開始累加上去的，第一個(gè)定時(shí)器編號是0磅轻，第二個(gè)是1珍逸，如此類推，所以清除所有的定時(shí)器可以這么實(shí)現(xiàn)聋溜。
var timer = setTimeout(function(){}, 0);
while(timer >= 0) {
clearTimeout(timer);
timer--;
}
二谆膳、節(jié)流和防抖
通過定時(shí)器，我們可以實(shí)現(xiàn)函數(shù)節(jié)流和函數(shù)防抖撮躁。
1. 函數(shù)節(jié)流
函數(shù)節(jié)流指的是在規(guī)定時(shí)間內(nèi)重復(fù)觸發(fā)不重復(fù)執(zhí)行漱病，以節(jié)流。如監(jiān)聽頁面滾動(dòng)到底的時(shí)候加載新的數(shù)據(jù)，但往往會(huì)連續(xù)觸發(fā)滾動(dòng)事件導(dǎo)致連續(xù)發(fā)起幾次請求杨帽，此時(shí)就需要函數(shù)節(jié)流漓穿。
function throttle(fn, delay) {
var isFinished = true;
return function() {
if (!isFinished) return;
isFinished = false;
var that = this, args = arguments;
setTimeout(function() {
fn.apply(that, args);
isFinished = true;
}, delay);
};
}
document.onscroll = throttle(function() { /* 請求數(shù)據(jù) */ }, 20);
正如上面的代碼，函數(shù)節(jié)流主要是鎖的思想注盈。先執(zhí)行一次晃危，當(dāng)上一個(gè)執(zhí)行完畢才解鎖isFinished = true，否則鎖住isFinished = false代碼不讓執(zhí)行老客。
2. 函數(shù)防抖
函數(shù)防抖指的是規(guī)定時(shí)間內(nèi)重復(fù)觸發(fā)只執(zhí)行最后一次僚饭，以防止頻繁觸發(fā)帶來的抖動(dòng)。如輸入框搜索時(shí)胧砰，如果每當(dāng)輸入框有一個(gè)字變化就搜索鳍鸵，一是對頻繁請求對服務(wù)器壓力大，二是前端也會(huì)頻繁的閃現(xiàn)搜索的結(jié)果尉间，用戶體驗(yàn)不好偿乖。所以一般都會(huì)有個(gè)延時(shí)，等用戶輸入延遲一段時(shí)間后確定不再輸入再進(jìn)行搜索哲嘲。
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer);
var that = this, args = arguments;
setTimeout(function() {
fn.apply(that, args);
}, delay);
};
}
document.querySelector('input').onchange = debounce(function() { /* 請求數(shù)據(jù) */ }, 200);
函數(shù)防抖的主要思想是定時(shí)器清除汹想。規(guī)定時(shí)間內(nèi)再次觸發(fā)，則上一個(gè)未被執(zhí)行的定時(shí)器被清除撤蚊，再開啟新的定時(shí)器，直到最后一次觸發(fā)损话。
上面寫的是兩個(gè)簡單版本的函數(shù)節(jié)流和函數(shù)防抖侦啸，主要是為了講解兩者的主要思想，也好進(jìn)行區(qū)分：
- 節(jié)流是先執(zhí)行一次丧枪，然后過規(guī)定時(shí)間之后才能再執(zhí)行光涂。防抖是過了規(guī)定時(shí)間之后沒再觸發(fā)，最后執(zhí)行一次拧烦。
- 節(jié)流是鎖的思想忘闻，防抖是清除定時(shí)器的思想。
- 注意最后返回結(jié)果都是函數(shù)恋博，而且要注意函數(shù)中的this指向是返回函數(shù)的this齐佳。
