js定時器，你所要了解的那點事

背景：

1.數據展現頁加一個自動刷新功能，讓用戶看到最新數據。 
2.加個定時，過*（時間段）後執行，實現xx效果。
3.調整一下這幾個事件響應的執行順序等等。。。
複製代碼

開發過程當中咱們經常要用到定時器去完成某些需求。js爲咱們準備了兩個函數：setTimeout和setInterval，咱們在進入主題以前，先簡單介紹一下它們

1.setTimeout：
var timerId =setTimeout(function(){
    //do    
},delay)

2.setInterval
var timerId2 = setInterval(function() {
    //do
}, delay)
//delay 時間週期
複製代碼

首先，它們都會返回一個整數編號用來表示定時器。將這個值傳給各自的clear方法能夠取消定時。

其次，setTimeout是指望推遲(delay)ms後執行函數, setInterval則是指望間隔(delay)ms就執行一次函數。

爲何只是說指望那？上一個🌰瞧瞧

var start_date = 0;
setTimeout(function(){
	var end_date = new Date().getTime()/1000
	console.log('enter setTimeout date : ' +  end_date)
	console.log('time interval : '  + (end_date - start_date) + '秒')
},1000)
function bulky(){
	start_date = new Date().getTime()/1000;
	console.log("bulky start date : " + start_date)
	for(var i=0;i<100000;i++){
		for(var j=0;j<100000;j++){
			var k = 0;
			k = k*k;
		}
	}
}
bulky()
複製代碼

先預測一下結果再運行代碼，結果以下：

跟你想象中的結果同樣嗎？你會發現setTimeout並非像它指望的那樣----延遲1s就執行，而是要等待bulky()執行結束後才執行，這就是定時器不定時的情形。

定時器是怎麼實現定時的？爲何會出現不定時的狀況？

首先，要明確的一點：javascript是以單線程的方式運行的。JavaScript的主要用途是與用戶互動，以及操做DOM。若以多線程的方式，則可能出現衝突。假設有兩個線程同時操做一個DOM元素，線程1要求瀏覽器刪除DOM，而線程2卻要求修改DOM樣式，這時瀏覽器就沒法決定採用哪一個線程的操做。固然，咱們能夠爲瀏覽器引入「鎖」的機制來解決這些衝突，但大大提升複雜性，因此 JavaScript從誕生開始就選擇了單線程執行。在某一時刻內只能執行特定的一個任務，而且會阻塞其它任務執行。

可是JavaScript 有個基於「Event Loop」併發的模型（不是並行）。前者是邏輯上的同時發生，然後者是物理上的同時發生。因此，單核處理器也能實現併發。

上圖說明一下併發和並行：

再上圖說明一下Event Loop

js既然是單線程的，也就意味着全部任務須要排隊。全部任務能夠分紅兩種，一種是同步任務（synchronous），另外一種是異步任務（asynchronous）

• 同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務，造成了一個執行棧（execution context stack）

• 異步任務指的是，不進入主線程，而進入"任務隊列"（task queue）的任務。"任務隊列"是一個事件的隊列（能夠看成消息的隊列來理解）。IO設備完成一項任務or異步任務有了運行結果，就在"任務隊列"中添加一個事件，表示相關的操做能夠進入"執行棧"，就等着執行棧調用了。

參照Event Loop的圖，說一下大體的流程----> 執行棧中流式執行函數(同步任務)，可能會調用API在任務隊列中加入事件（onlick，onload等等）但並不執行。只有當前執行棧沒有其餘操做時，任務隊列纔會入執行棧中，執行

原理講完了，回到正題。由於setTimeout, setInterval是異步任務，調用以後不會直接進入執行棧，而是進入任務隊列，因此只有等到當前執行棧沒有其餘操做，它們纔會進入執行棧中執行， 以上就是爲何定時器不老是定時的緣由了。

哦，對了若是delay時間週期設爲0，至關於一個插隊操做

舉例

🌰獻上：

function f1(){
	console.log('f1')
}
function f2(){
	console.log('f2')
}
function f3(){
	console.log('f3')
	setTimeout(function(){
		console.log('setTimeout1')
	},2000)
}
setTimeout(function(){
	console.log('setTimeout2')
},3000)
setTimeout(function(){
	console.log('setTimeout3')
},1000)
setTimeout(function(){
	console.log('setTimeout4')
},0)

f1()
f2()
f3()
複製代碼

運行結果

好了，以上內容就是我對js定時器的認識，但願能夠幫助到你

未經本人容許，不得轉載。文章有疏漏淺薄之處，請各位大神斧正