這篇文章帶給大家的內容是關於JavaScript單執行緒機制與setTimeout執行原理的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
Javascript 引擎單執行緒機制
首先明確，JavaScript引擎是單執行緒機制。
JavaScript 是單執行緒執行的，無法同時執行多段程式碼。當某一段程式碼正在執行的時候，所有後續的任務都必須等待，形成一個任務佇列。一旦目前任務執行完畢，再從佇列中取出下一個任務，這也常被稱為 「阻塞式執行」。
可以理解為：只有在JS線程中沒有任何同步程式碼要執行的前提下才會執行非同步程式碼
所以一次滑鼠點擊，或是計時器到達時間點，或是Ajax 請求完成觸發了回呼函數，這些事件處理程序或回呼函數都不會立即執行，而是立即排隊，一旦執行緒有空閒就 執行。假如目前JavaScript 執行緒正在執行一段很耗時的程式碼，此時發生了一次滑鼠點擊，那麼事件處理程序就被阻塞，使用者也無法立即看到回饋，事件處理程序會被放入任務佇列，直到前面的程式碼結束以後才會開始執行。如果程式碼中設定了一個setTimeout，那麼瀏覽器就會在適當的時間，將程式碼插入任務佇列，如果這個時間設為0，就代表立即插入佇列，但不是立即執行，仍然要等待前面程式碼執行完畢。所以 setTimeout 並不能保證執行的時間，是否及時執行取決於 JavaScript 執行緒是擁擠還是空閒。瀏覽器的多執行緒機制與事件循環(event loop)
首先明確，瀏覽器的核心是多執行緒的，它們在核心製控下相互配合以保持同步，一個瀏覽器至少實作三個常駐執行緒：
javascript 引擎執行緒
GUI 渲染執行緒
瀏覽器事件觸發執行緒
實例分析
在具備了上述理論基礎之後，我們將以下幾個實例進行分析：======= ====================================
var t = true;
window.setTimeout(function (){
t = false;
},1000);
while (t){}
alert('end');t = false 無法執行，因此 alert('end') 不會執行。 解析：
JS是单线程的，所以会先执行 while(t){} 再 alert，但这个循环体是死循环，所以永远不会执行alert。
为什么不执行 setTimeout？是因为JS的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以 setTimeout 只能等JS空闲才会执行，但死循环是永远不会空闲的，所以 setTimeout 也永远得不到执行。
===========================================
var start = new Date();
setTimeout(function(){
var end = new Date();
console.log("Time elapsed: ", end - start, "ms");
}, 500);
while (new Date - start <= 1000){}运行结果："Time elapsed: 1035 ms" (这里的1035不准确 但是一定是大于1000的)
解析：
JS是单线程 setTimeout 异步代码 其回调函数执行必须需等待主线程运行完毕
当while循环因为时间差超过 1000ms 跳出循环后，setTimeout 函数中的回调才得以执行
===========================================
for(var i=0;i<10;i++){
setTimeout(function() {
console.log(i);
}, 0);
}运行结果：输出10个10
解析：JS单线程 setTimeout 异步代码 任务队列
问：如何修改可以使上述代码输出 0123456789
自执行函数 或 使用ES6中的let关键字
// 自执行函数 形成闭包 记忆其被创建时的环境
for(var i=0;i<10;i++){
setTimeout((function() {
console.log(i);
})(), 0);
}现在我们了解了setTimeout函数执行的原理，那么它有什么作用呢？
setTimeout函数增加了Javascript函数调用的灵活性，为函数执行顺序的调度提供极大便利。
简言之，改变顺序，这正是setTimeout(0)的作用。
使用场景示例：
<input type="text" onkeydown="show(this.value)">
<p></p>
<script type="text/javascript">
function show(val) {
document.getElementsByTagName('p')[0].innerHTML = val;
}
</script>这里绑定了 keydown 事件，意图是当用户在文本框里输入字符时，将输入的内容实时地在
中显示出来。但是实际效果并非如此，可以发现，每按下一个字符时，
中只能显示出之前的内容，无法得到当前的字符。
修改代码：
<input type="text" onkeydown="var self=this; setTimeout(function(){show(self.value)}, 0)">
<p></p>
<script type="text/javascript">
function show(val) {
document.getElementsByTagName('p')[0].innerHTML = val;
}
</script>这段代码使用setTimeout(0)就可以实现需要的效果了。
这里其实涉及2个任务，1个是将键盘输入的字符回写到输入框中，一个是获取文本框的值将其写入p中。第一个是浏览器自身的默认行为，一个是我们自己编写的代码。很显然，必须要先让浏览器将字符回写到文本框，然后我们才能获取其内容写到p中。改变顺序，这正是setTimeout(0)的作用。
其他应用场景：有时候，加载一些广告的时候，我们用setTimeout实现异步，好让广告不会阻塞我们页面的渲染。
如果一个计时器被阻塞而不能立即执行，它将延迟执行直到下一次可能执行的时间点才被执行（比期望的时间间隔要长些）
如果setInterval回调函数的执行时间将足够长（比指定的时间间隔长），它们将连续执行并且彼此之间没有时间间隔。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
以上是JavaScript單線程機制與setTimeout執行原理的介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
