JavaScript 단일 스레드 메커니즘 및 setTimeout 실행 원리 소개(코드 포함)-JS 튜토리얼-php.cn

이 글은 JavaScript 단일 스레드 메커니즘과 setTimeout 실행 원리(코드 포함)를 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

Javascript 엔진 단일 스레드 메커니즘

우선 JavaScript 엔진이 단일 스레드 메커니즘이라는 것이 분명합니다.

JavaScript는 단일 스레드에서 실행되며 동시에 여러 코드 조각을 실행할 수 없습니다. 특정 코드가 실행되면 모든 후속 작업은 대기해야 하며 작업 대기열을 형성합니다. 현재 작업이 완료되면 다음 작업이 대기열에서 제거되는데, 이를 종종 "실행 차단"이라고 합니다.

JS 스레드에서 실행될 동기 코드가 없을 때만 비동기 코드가 실행된다는 의미로 이해할 수 있습니다.

마우스 클릭, 타이머가 시점에 도달, Ajax 요청이 완료되어 콜백 함수, 이벤트 핸들러나 콜백 함수는 즉시 실행되지 않지만 즉시 대기열에 추가되어 스레드가 사용 가능해지자마자 실행됩니다. 현재 JavaScript 스레드가 시간이 많이 걸리는 코드를 실행하고 마우스 클릭이 발생하면 이벤트 핸들러가 차단되고 사용자는 이전 이벤트가 발생할 때까지 피드백을 즉시 볼 수 없습니다. 코드가 끝날 때까지 실행이 시작되지 않습니다. 코드에 setTimeout을 설정하면 브라우저는 적절한 시간에 작업 큐에 코드를 삽입합니다. 이 시간을 0으로 설정하면 즉시 큐에 삽입되지만 실행되지는 않는다는 의미입니다. 즉시 이전 코드가 실행될 때까지 기다려야 합니다. 따라서 setTimeout은 실행 시간을 보장하지 않습니다. 시간 내에 실행되는지 여부는 JavaScript 스레드가 혼잡한지 유휴 상태인지에 따라 다릅니다.

브라우저의 멀티스레딩 메커니즘과 이벤트 루프

우선 브라우저의 커널이 멀티스레딩이라는 것이 분명합니다. 이들은 커널의 제어 하에 서로 협력하여 동기화를 유지합니다. 스레드 :

javascript 엔진 스레드

GUI 렌더링 스레드

브라우저 이벤트 트리거 스레드

JavaScript 엔진은 단일 스레드에서 실행되며, 브라우저에서만 항상 하나의 스레드만 JavaScript 프로그램을 실행합니다

javascript 엔진은 기반 이벤트 기반 단일 스레드 실행에서 JS 엔진은 항상 작업 대기열에 작업이 도착할 때까지 기다린 다음 이를 처리합니다. 브라우저에는 언제든지 JS 프로그램을 실행하는 JS 스레드가 하나만 있습니다.

GUI 렌더링 스레드는 인터페이스를 다시 그려야 하거나(다시 그리기) 일부 작업으로 인해 리플로우가 발생하는 경우 이 스레드가 실행됩니다. 그러나 GUI 렌더링 스레드와 JS 엔진은 상호 배타적이라는 점에 유의해야 합니다. JS 엔진이 실행되면 GUI 스레드가 일시 중지되고 GUI 업데이트가 대기열에 저장되었다가 JS 엔진이 실행될 때 즉시 실행됩니다. 게으른.

이벤트 트리거 스레드. 이벤트가 트리거되면 스레드는 보류 중인 대기열의 끝에 이벤트를 추가하고 JS 엔진의 처리를 기다립니다. 이러한 이벤트는 setTimeOut과 같은 JavaScript 엔진에 의해 현재 실행되는 코드 블록이나 마우스 클릭, AJAX 비동기 요청 등과 같은 브라우저 커널의 다른 스레드에서 발생할 수 있습니다. 그러나 JS의 단일 스레드 관계로 인해 모든 이벤트는 이러한 이벤트는 JS 엔진의 처리를 위해 대기열에 추가되어야 합니다. (스레드에서 동기 코드가 실행되지 않으면 비동기 코드가 실행됩니다.)

이벤트 루프(이벤트 루프): 비동기 코드를 관리하는 데 사용되며 스레드 풀에 배치됩니다.

JavaScript setTimeout의 구현 원리

우선, setTimeout 함수는 비동기 코드라는 것이 분명하지만 실제로 setTimeout은 실제 비동기 작업이 아닙니다.

JS 스레드의 작동 메커니즘으로 인해: 비동기 코드는 동기 코드가 없을 때만 실행됩니다. setTimeout은 비동기 코드이므로 js가 유휴 상태일 때만 setTimeout을 실행할 수 있습니다. 앞서 언급한 것처럼 코드에 setTimeout이 설정되어 있으면 브라우저는 적절한 시간에 작업 대기열에 코드를 삽입합니다. . 시간을 0으로 설정하면 즉시 대기열에 삽입되지만 즉시 실행되지는 않습니다. 이전 코드가 실행될 때까지 기다려야 합니다. 따라서 setTimeout은 실행 시간을 보장하지 않습니다. 시간 내에 실행되는지 여부는 JavaScript 스레드가 혼잡한지 유휴 상태인지에 따라 다릅니다.

즉, setTimeout은 작업(실행해야 하는 함수)이 지정된 시간 이후 대기하도록 대기열에 삽입된다는 것만 보장할 수 있으며 작업이 언제 실행될지는 보장하지 않습니다. JavaScript를 실행하는 스레드는 대기열에서 작업을 꺼내어 유휴 상태일 때 실행합니다. JavaScript는 이 대기열 메커니즘을 사용하여 비동기 실행의 환상을 제공합니다.

때때로 setTimeout의 코드가 빠르게 실행되며 이 코드가 비동기적으로 실행되는 것처럼 느낄 수 있습니다. 이는 시간이 많이 걸리는 작업으로 인해 JavaScript 스레드가 차단되지 않으므로 대기열에 있는 작업을 빠르게 제거할 수 있기 때문입니다. .그런 다음 실행하세요.

예제 분석

위의 이론적 근거를 갖춘 후 다음 예를 분석합니다.

======================= === =================

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(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实现异步，好让广告不会阻塞我们页面的渲染。