js-循環執行一個函數

js里的兩個內置函數：setInterval()與setTimeout()提供了定時的功能，前者是每隔幾秒執行一次，后者是延遲一段時間執行一次。javascript 是一個單線程環境，定時並不是很准，遇到阻塞的操作會延遲，代碼：

 

<script>
var fn = function(){
		alert("fn()函數被執行了");
	}
	
	setInterval(fn,1000);
</script>

　　

以上代碼會每隔一分鍾彈窗，如果不關閉彈窗。Js不會在下一秒執行這個函數。也就說，被阻塞了。

除了setInterval()實現函數重復執行外，還可以用setTimeout()實現函數重復執行。是這么做的：

 

<script>
	var fn = function(){
		alert("fn()函數被執行了");
		setTimeout(fn, 1000)
	}
	
	fn();
</script>

　　

代碼中用setTimeout()調用自身。這樣函數執行一次，會一直延遲一段時間調用自身，實現了函數重復執行，是不是覺得很妙？看過許多網頁上用到的jquery倒計時插件，都是用setTimeout()來重復執行函數。

setTimeout()執行順序有個坑，看下面的代碼，你覺得控制台輸出的結果是什么：

 

<script>
setTimeout(function() {
        console.log(1);
}, 0);
console.log(2);
</script>

　　

答案是先輸出2，再輸出1。這跟我們的直覺是不一致的。當事件隊列為空的時候，才執行SetTimeout()里面的代碼。

回到前面，js定時不准的問題，看到一篇靠譜的博客，用的是setTimeout()這種。可以參考后續博客，點下面的鏈接：

前端倒計時不准的問題