JS setTimeout方法初探

  • 時間:2018-06-06 01:54 作者:Inn程序媛 來源:Inn程序媛 閱讀:286
  • 掃一掃,手機訪問
摘要:今天寫代碼的過程中偶然發現了javascript中setTimeout()方法的神秘之處,于是開始進行研究。研究了兩個小時,寫了個小demo進行了測試,終于有一點自己的了解了,于是和大家進行分享。setTimeout方法詳情首先在W3School上為setTimeout給出了如下解釋:setTime

今天寫代碼的過程中偶然發現了javascript中setTimeout()方法的神秘之處,于是開始進行研究。研究了兩個小時,寫了個小demo進行了測試,終于有一點自己的了解了,于是和大家進行分享。

setTimeout方法詳情

首先在W3School上為setTimeout給出了如下解釋:setTimeout() 方法使用于在指定的毫秒數后調使用函數或者計算表達式。

使用法:setTimeout(code,millisec)

其中第一個參數定義一串代碼,能是方法名,也能是定義的一個function,第二個參數值指定一個毫秒數,規定在多少毫秒后執行第一個參數定義的方法(ps:盡管在這里規定了多少時間之后執行代碼但是偶爾在程序比較復雜或者者遇到執行時間比較長的代碼時,程序并不肯定按照這個時間后去執行代碼,這就是線程阻塞問題)。

javascript線程問題

在深入了解setTimeout之前必需先理解javascript的線程機制。JavaScript語言是單線程,也就是說,同一個時間只可以做一件事。那么,為什么JavaScript不可以有多個線程呢?這樣可以提高效率啊。

JavaScript的單線程,與它的使用途有關。作為瀏覽器腳本語言,JavaScript的主要使用途是與使用戶互動,以及操作DOM。這決定了它只可以是單線程,否則會帶來很復雜的同步問題。比方,假定JavaScript同時有兩個線程,一個線程在某個DOM節點上增加內容,另一個線程刪除了這個節點,這時瀏覽器應該以哪個線程為準?

所以,為了避免復雜性,從一誕生,JavaScript就是單線程,這已經成了這門語言的核心特征,將來也不會改變。

為了利使用多核CPU的計算可以力,HTML5提出Web worker標準,允許JavaScript腳本創立多個線程,但是子線程完全受主線程控制,且不得操作DOM。所以,這個新標準并沒有改變JavaScript單線程的本質。

排隊問題

單線程就意味著同一時間不可可以有兩段代碼同時在執行,那么javascript面對著那么多的代碼和方法,該怎樣執行呢?這時就會有一個任務隊列,javascript將正在執行的任務后面的任務都會依次放入任務隊列中,當前一個任務執行完成才會把它從任務中釋放出來進行執行。

javascript中的異步

盡管javascript中的方法必需同步執行,但是javascript提供了兩個方法能不按照書寫順序執行代碼,即先將任務放入任務隊列中,待條件滿足時才會執行,這兩個方法就是定時器setTimeout和setInterval。

setTimeout異步執行

setTimeout能指定多少秒后執行方法,這個值能是0也能是大于0的數值,但是無論這個參數值是多少,該方法中包含的代碼塊都會在所有的同步任務執行完成后才會執行,即就是寫在所有代碼的第一行,也還是會在同步任務一律完成才會執行setTimeout,所以萬一后端響應時間比較長的情況時,setTimeout并不肯定可以在規定的時間后執行代碼。

而且假如有多個setTimeout有時間為0的和時間大于0的那么不論他們在代碼中的相對順序是怎么的,都會優先執行setTimeout為0的代碼塊,其次才會在多少毫秒后執行其余setTimeout代碼塊。

這里我寫了一個例子,我附上代碼:

//setTimeout方法名,執行代碼時可在控制臺通過clearTimeout(timeSet)清理

var timeSet ;

setTime();

var a = [10,20,30,40,50];

for(var i=0;i

console.log("for:"+i+" "+a[i]+"
");

setTimeout(function(){

console.log("setTimeout 2000 : "+i+" "+a[i]);

},2000);

setTimeout(function(){

console.log("setTimeout 0 : "+i+" "+a[i]);

},0);

}

setTimeout(function(){

console.log("for循環后面的setTimeout");

},0);

(function(){

console.log("我是setTimeout后面的函數1");

}());

(function(){

console.log("我是setTimeout后面的函數2");

}());

function setTime(){

var _date = new Date();

var hh = _date.getHours();

var mm = (_date.getMinutes()<10?"0":"")+_date.getMinutes();

var ss = (_date.getSeconds()<10?"0":"")+_date.getSeconds();

var time = hh+":"+mm+":"+ss;

console.log(time);

timeSet = setTimeout(setTime,1000);

}

JS setTimeout方法初探

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询