JS单线程与setTimeout实行道理

2024年5月12日 173次阅读 来源: 澄海风

Javascript 引擎单线程机制

  • 起首明白，JavaScript引擎是单线程机制。
  • JavaScript 是单线程实行的，没法同时实行多段代码。当某一段代码正在实行的时刻，一切后续的使命都必需守候，构成一个使命行列。一旦当前使命实行终了，再从行列中掏出下一个使命，这也常被称为 “壅塞式实行”。

  • 能够理解为：只要在JS线程中没有任何同步代码要实行的前提下才会实行异步代码

  • 所以一次鼠标点击，或是计时器抵达时候点，或是 Ajax 要求完成触发了回调函数，这些事宜处置惩罚递次或回调函数都不会马上运转，而是马上列队，一旦线程有余暇就 实行。假如当前 JavaScript 线程正在实行一段很耗时的代码，此时发生了一次鼠标点击，那末事宜处置惩罚递次就被壅塞，用户也没法马上看到反应，事宜处置惩罚递次会被放入使命行列，直到前面的代码完毕今后才会最先实行。假如代码中设定了一个 setTimeout，那末浏览器便会在适宜的时候，将代码插进去使命行列，假如这个时候设为 0，就代表马上插进去行列，但不是马上实行，依然要守候前面代码实行终了。所以 setTimeout 并不能保证实行的时候，是不是及时实行取决于 JavaScript 线程是拥堵照样余暇。

浏览器的多线程机制与事宜轮回(event loop)

  • 起首明白，浏览器的内核是多线程的，它们在内核制控下相互配合以坚持同步，一个浏览器最少完成三个常驻线程：

    • javascript 引擎线程
    • GUI 衬着线程
    • 浏览器事宜触发线程

  • JavaScript 引擎是单线程运转的,浏览器不管在什么时刻都只且只要一个线程在运转JavaScript递次

    • javascript 引擎是基于事宜驱动单线程实行的，JS引擎一向守候着使命行列中使命的到来，然后加以处置惩罚，浏览器不管什么时刻都只要一个JS线程在运转JS递次。
  • GUI衬着线程担任衬着浏览器界面，当界面需要重绘（Repaint）或由于某种操纵激发回流(reflow)时,该线程就会实行。但需要注重 GUI衬着线程与JS引擎是互斥的，当JS引擎实行时GUI线程会被挂起，GUI更新会被保存在一个行列中比及JS引擎余暇时马上被实行。
  • 事宜触发线程，当一个事宜被触发时该线程会把事宜添加到待处置惩罚行列的队尾，守候JS引擎的处置惩罚。这些事宜可来自 JavaScript 引擎当前实行的代码块如 setTimeOut，也可来自浏览器内核的其他线程如鼠标点击、AJAX 异步要求等，但由于JS的单线程关联一切这些事宜都得列队守候JS引擎处置惩罚。（当线程中没有实行任何同步代码的前提下才会实行异步代码）
  • 事宜轮回(event loop): 是用来治理我们的异步代码的，它会把它们放在一个线程池当中

JavaScript中setTimeout的完成道理

  • 起首明白，setTimeout函数是异步代码，但实在setTimeout并非真正的异步操纵
  • 由于JS线程的事情机制：当线程中没有实行任何同步代码的前提下才会实行异步代码，setTimeout是异步代码，所以setTimeout只能等js余暇才会实行
  • 前面提到过，假如代码中设定了一个 setTimeout，那末浏览器便会在适宜的时候，将代码插进去使命行列，假如这个时候设为 0，就代表马上插进去行列，但不是马上实行，依然要守候前面代码实行终了。所以 setTimeout 并不能保证实行的时候，是不是及时实行取决于 JavaScript 线程是拥堵照样余暇。
  • 也就是说setTimeout只能保证在指定的时候事后将使命(需要实行的函数)插进去行列期待，并不保证这个使命在什么时刻实行。实行javascript的线程会在余暇的时刻，自行从行列中掏出使命然后实行它。javascript 经由过程这类行列机制，给我们制作一个异步实行的假象。
  • 偶然setTimeout中的代码会很快获得实行，我们会觉得这段代码是在异步实行，这是由于 javascript 线程并没有由于何耗时操纵而壅塞，所以能够很快地掏出列队行列中的使命然后实行它。

实例剖析

在具有了上述理论基础以后，我们对以下几个实例举行剖析：

  1. ===========================================

    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 也永久得不到实行。

  2. ===========================================

    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 函数中的回调才得以实行

  3. ===========================================

    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(0)函数的作用

如今我们了解了setTimeout函数实行的道理，那末它有什么作用呢？
setTimeout函数增加了Javascript函数挪用的灵活性，为函数实行递次的调理供应极大方便。
简言之，转变递次，这正是setTimeout(0)的作用。

运用场景示例：

<input type="text" onkeydown="show(this.value)">  
<div></div>  
<script type="text/javascript">  
  function show(val) {  
    document.getElementsByTagName('div')[0].innerHTML = val;  
  }  
</script>

这里绑定了 keydown 事宜，企图是当用户在文本框里输入字符时，将输入的内容及时地在 <div> 中显示出来。然则实际结果并非如此，能够发明，每按下一个字符时，<div> 中只能显示出之前的内容，没法获得当前的字符。

修正代码：

  <input type="text" onkeydown="var self=this; setTimeout(function(){show(self.value)}, 0)">  
  <div></div>  
  <script type="text/javascript">  
    function show(val) {  
      document.getElementsByTagName('div')[0].innerHTML = val;  
    }  
  </script>

这段代码运用setTimeout(0)就能够完成需要的结果了。

这里实在触及2个使命，1个是将键盘输入的字符回写到输入框中，一个是猎取文本框的值将其写入div中。第一个是浏览器本身的默许行动，一个是我们本身编写的代码。很显然，必需要先让浏览器将字符回写到文本框，然后我们才猎取其内容写到div中。转变递次，这正是setTimeout(0)的作用。

其他运用场景：偶然刻，加载一些广告的时刻，我们用setTimeout完成异步，好让广告不会壅塞我们页面的衬着。

setTimeout 和 setInterval 在实行异步代码的时刻有着基础的差别

  • 假如一个计时器被壅塞而不能马上实行，它将耽误实行直到下一次能够实行的时候点才被实行（比希冀的时候距离要长些）
  • 假如setInterval回调函数的实行时候将充足长（比指定的时候距离长），它们将一连实行而且彼此之间没偶然候距离。
    原文作者：澄海风
    原文地址: https://segmentfault.com/a/1190000018666579
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞