解析setTimeout時(shí)間設(shè)置為0

zhigoo 發(fā)布于2019-08-22 15:06 / 3005人閱讀

摘要：要是當(dāng)前代碼耗時(shí)很長(zhǎng)，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會(huì)在指定的時(shí)間執(zhí)行。需要監(jiān)聽文字改變，每一次改變都會(huì)調(diào)用一次回調(diào)函數(shù)，現(xiàn)在需要的一種實(shí)現(xiàn)是在用戶停止鍵盤事件一段時(shí)間后，去發(fā)送一個(gè)請(qǐng)求。

1、開胃菜，setTimeout為何物

首先看一下w3school上面對(duì)于setTimeout的解釋

setTimeout(fn,millisec) 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

很簡(jiǎn)單，setTimeout() 只執(zhí)行 fn 一次，到底什么時(shí)候執(zhí)行取決于第二個(gè)參數(shù)millisec設(shè)定的毫秒數(shù)，所以很多人習(xí)慣上稱之為延遲，無(wú)非就是延遲一段時(shí)間后再執(zhí)行里面的代碼。

setTimeout(function(){
    console.log("我是setTimeout");
}, 1000);

正常情況下，我是setTimeout 這句話并不會(huì)馬上輸出而是等1000毫秒以后會(huì)在瀏覽器的控制臺(tái)輸出。

2、主菜，js是單線程的

OK，看一個(gè)例子，這個(gè)例子的輸出結(jié)果是什么？

setTimeout(function(){
    console.log(1);
}, 0);
console.log(2);
console.log(3);

出乎一些人的意料，得到的結(jié)果竟然是2、3、1。這似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接輸出啊，為啥1卻在最后輸出了呢？

這就需要搞清楚一個(gè)很重要的概念：js是單線程的，單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就不得不一直等著。
其實(shí)很好理解，就像大家去超市買東西一樣，所有買東西的人都需要在收銀臺(tái)排隊(duì)結(jié)賬，正常情況下每個(gè)收銀臺(tái)同一時(shí)間只能為一位顧客結(jié)賬，這位顧客結(jié)賬完成才能為下一位顧客服務(wù)。

而瀏覽器的內(nèi)核是多線程的，它們?cè)趦?nèi)核制控下相互配合以保持同步，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程。

javascript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JS引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來(lái)，然后加以處理，瀏覽器無(wú)論什么時(shí)候都只有一個(gè)JS線程在運(yùn)行JS程序。
GUI渲染線程負(fù)責(zé)渲染瀏覽器界面，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(reflow)時(shí),該線程就會(huì)執(zhí)行。但需要注意 GUI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。
事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理。這些事件可來(lái)自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeOut、也可來(lái)自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、AJAX異步請(qǐng)求等，但由于JS的單線程關(guān)系所有這些事件都得排隊(duì)等待JS引擎處理。（當(dāng)線程中沒有執(zhí)行任何同步代碼的前提下才會(huì)執(zhí)行異步代碼）

其實(shí)，當(dāng)js代碼執(zhí)行遇到setTimeout(fn,millisec)時(shí)，會(huì)把fn這個(gè)函數(shù)放在任務(wù)隊(duì)列中，當(dāng)js引擎線程空閑時(shí)并達(dá)到millisec指定的時(shí)間時(shí)，才會(huì)把fn放到j(luò)s引擎線程中執(zhí)行。

setTimeout(fn,0)的含義是，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行，也就是說(shuō)，盡可能早得執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個(gè)事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事件都處理完，才會(huì)得到執(zhí)行。

HTML5標(biāo)準(zhǔn)規(guī)定了setTimeout()的第二個(gè)參數(shù)的最小值（最短間隔），不得低于4毫秒，如果低于這個(gè)值，就會(huì)自動(dòng)增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。另外，對(duì)于那些DOM的變動(dòng)（尤其是涉及頁(yè)面重新渲染的部分），通常不會(huì)立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時(shí)使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼（執(zhí)行棧）執(zhí)行完，主線程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)。要是當(dāng)前代碼耗時(shí)很長(zhǎng)，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會(huì)在setTimeout()指定的時(shí)間執(zhí)行。

3、甜品，setTimeout的妙用

其實(shí)setTimeout是有一些妙用的，這里簡(jiǎn)單列舉幾個(gè)。

函數(shù)去抖

讓一個(gè)函數(shù)在一定間隔內(nèi)沒有被調(diào)用時(shí)，才開始執(zhí)行被調(diào)用方法。比如當(dāng)你在使用 google 搜索內(nèi)容的時(shí)候，有些關(guān)鍵詞輸入到一半，谷歌會(huì)展示一個(gè)可選列表，根據(jù)你當(dāng)前輸入的內(nèi)容作出的一個(gè)猜測(cè)聯(lián)想。需要監(jiān)聽文字改變，每一次改變都會(huì)調(diào)用一次回調(diào)函數(shù)，現(xiàn)在需要的一種實(shí)現(xiàn)是在用戶停止鍵盤事件一段時(shí)間后，去發(fā)送一個(gè)請(qǐng)求。

var debounce = function(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function(){
        method.call(context);
    },100);
}

輪訓(xùn)任務(wù)

js中可以使用setInterval開啟輪詢，但是這種存在一個(gè)問(wèn)題就是執(zhí)行間隔往往就不是你希望的間隔時(shí)間。

比如有個(gè)輪詢?nèi)蝿?wù)間隔是100ms，但是執(zhí)行方法的時(shí)間需要450ms，那么在200ms、300ms、400ms本來(lái)是計(jì)劃中執(zhí)行任務(wù)的時(shí)間，瀏覽器發(fā)現(xiàn)第一個(gè)還未執(zhí)行完，那么就會(huì)放棄2、3、4次的任務(wù)執(zhí)行，并且在500ms之后再次執(zhí)行任務(wù)，這樣的話，其實(shí)再次執(zhí)行的間隔就只有50ms。使用setTimeout構(gòu)造輪詢能保證每次輪詢的間隔。

setTimeout(function () {
    console.log("我被調(diào)用了");
    setTimeout(arguments.callee, 100);
}, 100);

延遲js引擎的調(diào)用

var div = document.createElement("div");
div.innerHTML = "我是一個(gè)div";
div.setAttribute("style", "width:200px; height:200px;background-color:#f00; ");
document.body.appendChild(div);

setTimeout(function() {
    console.log("我被調(diào)用了");
}, 1000);

雖然setTimeout有一些妙用，但是他確實(shí)是在宏觀任務(wù)隊(duì)列中新增任務(wù)了，所以萬(wàn)萬(wàn)不能濫用啊。