https://www.cnblogs.com/wzndkj/p/7069331.html

一、setTimeout基礎(chǔ)

setTimeout(func|code,delay); 第一個(gè)參數(shù)表示將要推遲的函數(shù)名或者一段代碼，第二個(gè)參數(shù)表示推遲執(zhí)行的毫秒數(shù) eg: console.log(1); setTimeout('console.log(2)',1000); console.log(3);answer: 1 3 2 ＊：推遲的代碼必須以字符串的形式，因?yàn)橐鎯?nèi)部使用eval()函數(shù)，將字符串轉(zhuǎn)為代碼。 ＊：如果推遲執(zhí)行的是函數(shù)，則可以直接將函數(shù)名，放入setTimeout() eg: function func(){console.log(2); } setTimeout(func,5000); //或者 setTimeout(function(){console.log(2); },1000)

?

*:如果寫成setTimeout(func(),5000);func會(huì)立即執(zhí)行

?

二、setTimeout支持更多的參數(shù) eg: setTimeout(function(a,b){console.log(a+b); },1000,4,5)//4,5 9 //'str' '2' str2 ＊：從第三個(gè)參數(shù)開始，依次用來表示第一個(gè)參數(shù)（回調(diào)函數(shù)）傳入的參數(shù) ＊：一些古老的瀏覽器是不支持，可以用bind或apply方法來解決 eg: setTimeout(function(a,b){console.log(a+b); }.bind(this,4,5),1000) ＊：第一個(gè)參數(shù)表示將原函數(shù)的this綁定全局作用域，第二個(gè)參數(shù)開始是要傳入原函數(shù)的參數(shù) ＊：當(dāng)調(diào)用綁定函數(shù)時(shí),綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind()方法的第一個(gè)參數(shù)作為 this 三、setTimeout()中回調(diào)函數(shù)中的this eg: var a=1; var obj={a:2,b:function(){setTimeout(function(){console.log(this.a);},2000);} }; obj.b(); 上面代碼輸出的是1，而不是2，表示o.b的this所指向的已經(jīng)不是o，而是全局環(huán)境了 可以用bind()來改變這個(gè)情況： var a=1; var obj={a:2,b:function(){setTimeout(function(){console.log(this.a);}.bind(this),2000);//注意這行} }; obj.b();

?

四、setTimeout()執(zhí)行回調(diào)間隔時(shí)間長(zhǎng)度 var startTime = new Date(); setTimeout(function () {console.log(new Date() - startTime); }, 100); //100+ 取決于后面同步執(zhí)行的JS需要占用多少時(shí)間 五、setTimeout(func,0) eg:func1和func2誰(shuí)會(huì)先執(zhí)行？function func1(){console.log(1); } function func2(){console.log(2); } setTimeout(function () {func1(); }, 0) func2();

?

setTimeout(function(){func1() },0) setTimeout(function(){func1(); })

有什么差別？

0秒延遲，此回調(diào)將會(huì)放到一個(gè)能立即執(zhí)行的時(shí)段進(jìn)行觸發(fā)。javascript代碼大體上是自頂向下的，但中間穿插著有關(guān)DOM渲染，事件回應(yīng)等異步代碼，他們將組成一個(gè)隊(duì)列，零秒延遲將會(huì)實(shí)現(xiàn)插隊(duì)操作。 不寫第二個(gè)參數(shù)，瀏覽器自動(dòng)配置時(shí)間，在IE，FireFox中，第一次配可能給個(gè)很大的數(shù)字，100ms上下，往后會(huì)縮小到最小時(shí)間間隔，Safari，chrome，opera則多為10ms上下。 六、setTimeout和單線程 首先需要注意javascript是單線程的，特點(diǎn)就是容易出現(xiàn)阻塞。如果一段程序處理時(shí)間很長(zhǎng)，很容易導(dǎo)致整個(gè)頁(yè)面hold住。什么交互都處理不了怎么辦？
setTimeout一個(gè)很關(guān)鍵的用法就是分片，如果一段程序過大，我們可以拆分成若干細(xì)小的塊。 例如上面的情況，我們將那一段復(fù)雜的邏輯拆分處理，分片塞入隊(duì)列。這樣即使在復(fù)雜程序沒有處理完時(shí)， 我們操作頁(yè)面，也是能得到即使響應(yīng)的。其實(shí)就是將交互插入到了復(fù)雜程序中執(zhí)行。
換一種思路，上面就是利用setTimeout實(shí)現(xiàn)一種偽多線程的概念
有個(gè)函數(shù)庫(kù)Concurrent.Thread.js 就是實(shí)現(xiàn)js的多線程的 eg:Concurrent.Thread.create(function(){for(var i=0; i<100000000; i++){console.log(i);} })$('#test').click(function(){alert(1); }); 雖然有個(gè)巨大的循環(huán)，但是這時(shí)不妨礙你去觸發(fā)alert(); 當(dāng)我們需要渲染一個(gè)很復(fù)雜的DOM時(shí)，例如table組件，復(fù)雜的構(gòu)圖等等， 假如整個(gè)過程需要3s,我們是等待完全處理完成在呈現(xiàn)，還是使用一個(gè)setTimeout分片, 將內(nèi)容一片一片的斷續(xù)呈現(xiàn)。 其實(shí)setTimeout給了我們很多優(yōu)化交互的空間。 七、如何使用 setTimeout這么厲害，那么我們是需要在在項(xiàng)目中大量使用嗎？ 我這邊的觀點(diǎn)是非常不建議，在我們業(yè)務(wù)中，基本上是禁止在業(yè)務(wù)邏輯中使用setTimeout的
例如，當(dāng)一個(gè)實(shí)例還沒有初始化的前，我們就使用這個(gè)實(shí)例，錯(cuò)誤的解決辦法是使用實(shí)例時(shí)加個(gè)setTimeout，確保實(shí)例先初始化。 為什么錯(cuò)誤？這里其實(shí)就是使用hack的手段 第一是埋下了坑，打亂模塊的生命周期 第二是出現(xiàn)問題時(shí)，setTimeout其實(shí)是很難調(diào)試的。
綜上，setTimeout其實(shí)想用好還是很困難的，時(shí)間的不確定性，排隊(duì)運(yùn)算混亂， 他更多的出現(xiàn)是在框架和類庫(kù)中，例如一些實(shí)現(xiàn)Promis的框架，就用上了setTimeout去實(shí)現(xiàn)異步。

轉(zhuǎn)載于:https://www.cnblogs.com/beimingbingpo/p/8532023.html

總結(jié)

以上是生活随笔為你收集整理的setTimeout详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。