資訊專欄INFORMATION COLUMN
摘要：要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在指定的時間執行。需要監聽文字改變，每一次改變都會調用一次回調函數，現在需要的一種實現是在用戶停止鍵盤事件一段時間后，去發送一個請求。
1、開胃菜，setTimeout為何物
首先看一下w3school上面對于setTimeout的解釋
setTimeout(fn,millisec) 方法用于在指定的毫秒數后調用函數或計算表達式。
很簡單，setTimeout() 只執行 fn 一次，到底什么時候執行取決于第二個參數millisec設定的毫秒數，所以很多人習慣上稱之為延遲，無非就是延遲一段時間后再執行里面的代碼。
setTimeout(function(){
console.log("我是setTimeout");
}, 1000);
正常情況下，我是setTimeout 這句話并不會馬上輸出而是等1000毫秒以后會在瀏覽器的控制臺輸出。
2、主菜，js是單線程的OK，看一個例子，這個例子的輸出結果是什么？
setTimeout(function(){
console.log(1);
}, 0);
console.log(2);
console.log(3);
出乎一些人的意料，得到的結果竟然是2、3、1。這似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接輸出啊，為啥1卻在最后輸出了呢？
這就需要搞清楚一個很重要的概念：js是單線程的，單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。
其實很好理解，就像大家去超市買東西一樣，所有買東西的人都需要在收銀臺排隊結賬，正常情況下每個收銀臺同一時間只能為一位顧客結賬，這位顧客結賬完成才能為下一位顧客服務。
而瀏覽器的內核是多線程的，它們在內核制控下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。
javascript引擎是基于事件驅動單線程執行的，JS引擎一直等待著任務隊列中任務的到來，然后加以處理，瀏覽器無論什么時候都只有一個JS線程在運行JS程序。
GUI渲染線程負責渲染瀏覽器界面，當界面需要重繪（Repaint）或由于某種操作引發回流(reflow)時,該線程就會執行。但需要注意 GUI渲染線程與JS引擎是互斥的，當JS引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。
事件觸發線程，當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX異步請求等，但由于JS的單線程關系所有這些事件都得排隊等待JS引擎處理。（當線程中沒有執行任何同步代碼的前提下才會執行異步代碼）
其實，當js代碼執行遇到setTimeout(fn,millisec)時，會把fn這個函數放在任務隊列中，當js引擎線程空閑時并達到millisec指定的時間時，才會把fn放到js引擎線程中執行。
setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。
HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔），不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。
3、甜品，setTimeout的妙用其實setTimeout是有一些妙用的，這里簡單列舉幾個。
函數去抖讓一個函數在一定間隔內沒有被調用時，才開始執行被調用方法。比如當你在使用 google 搜索內容的時候，有些關鍵詞輸入到一半，谷歌會展示一個可選列表，根據你當前輸入的內容作出的一個猜測聯想。需要監聽文字改變，每一次改變都會調用一次回調函數，現在需要的一種實現是在用戶停止鍵盤事件一段時間后，去發送一個請求。
var debounce = function(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
輪訓任務
js中可以使用setInterval開啟輪詢，但是這種存在一個問題就是執行間隔往往就不是你希望的間隔時間。
比如有個輪詢任務間隔是100ms，但是執行方法的時間需要450ms，那么在200ms、300ms、400ms本來是計劃中執行任務的時間，瀏覽器發現第一個還未執行完，那么就會放棄2、3、4次的任務執行，并且在500ms之后再次執行任務，這樣的話，其實再次執行的間隔就只有50ms。使用setTimeout構造輪詢能保證每次輪詢的間隔。
setTimeout(function () {
console.log("我被調用了");
setTimeout(arguments.callee, 100);
}, 100);
延遲js引擎的調用
var div = document.createElement("div");
div.innerHTML = "我是一個div";
div.setAttribute("style", "width:200px; height:200px;background-color:#f00; ");
document.body.appendChild(div);
setTimeout(function() {
console.log("我被調用了");
}, 1000);
雖然setTimeout有一些妙用，但是他確實是在宏觀任務隊列中新增任務了，所以萬萬不能濫用啊。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93172.html
摘要：禁止內聯腳本執行規則較嚴格，目前發現使用。合理使用上報可以及時發現，利于盡快修復問題。因為事件會從目標元素一層層冒泡至對象。允許給一個事件注冊多個監聽。表示在捕獲階段觸發，表示在冒泡階段觸發。 關于【Step-By-Step】 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目，每個工作日發布一道面試題。每個周末我會仔細閱讀大家的答案，整理最一份...
摘要：瀏覽器是多進程的，而瀏覽器的內核渲染進程是多線程的。如果已經將回調函數放進任務隊列，但是主線程正在執行一個非常耗時的任務，當這個任務執行完畢后，主線程去任務隊列中取任務，這個時候，就會出現連續執行的情況，也就是說相當于失效了。 前言 ??在刷筆試題的時候，經常會碰到setTimeout的問題，只知道這個是設置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...
摘要：問題引入接觸過事件循環的同學大都會糾結一個點，就是在中和執行順序的隨機性。當隊列被執行完，或者執行的回調數量達到上限后，事件循環才會進入下一個階段。嵌套的在下一個事件循環的階段執行回調輸出嵌套的。 問題引入 接觸過事件循環的同學大都會糾結一個點，就是在Node中setTimeout和setImmediate執行順序的隨機性。 比如說下面這段代碼： setTimeout(() => { ...
摘要：如果執行的準備時間大于了，因為執行同步代碼后，定時器的回調已經被放入隊列，所以會先執行隊列。 showImg(https://segmentfault.com/img/remote/1460000018998584); 閱讀原文 瀏覽器中的事件輪詢 JavaScript 是一門單線程語言，之所以說是單線程，是因為在瀏覽器中，如果是多線程，并且兩個線程同時操作了同一個 Dom 元素，...
閱讀 1100·2021-10-12 10:11
閱讀 884·2019-08-30 15:53
閱讀 2296·2019-08-30 14:15
閱讀 2970·2019-08-30 14:09
閱讀 1206·2019-08-29 17:24
閱讀 980·2019-08-26 18:27
閱讀 1287·2019-08-26 11:57
閱讀 2157·2019-08-23 18:23
