setTimeout이 시간을 0으로 설정하는 방법-JS 튜토리얼-php.cn

이 글에서는 주로 setTimeout 시간을 0으로 설정하는 내용을 소개합니다. setTimeout()은 window에 속하는 메소드이지만, window의 최상위 컨테이너 이름은 모두 생략합니다. 시간이 다 되면 지정된 메서드가 실행됩니다. 다음 기사에서는 주로 setTimeout 시간을 0으로 설정하는 관련 정보를 소개합니다. 도움이 필요한 친구는 이를 참조할 수 있습니다.

1. 애피타이저, setTimeout이란 무엇인가

먼저 위의 setTimeout에 대한 w3school의 설명을 살펴보겠습니다

setTimeout(fn, millisec) 메소드는 함수를 호출하거나 a 이후의 표현식을 계산하는 데 사용됩니다. 밀리초 단위로 지정됩니다.

매우 간단합니다. setTimeout() 은 fn을 한 번만 실행합니다. 실행 시기는 두 번째 매개변수인 millisec에 의해 설정된 밀리초 수에 따라 달라지므로 많은 사람들이 이를 지연이라고 부르는 데 익숙합니다. 이는 내부에서 코드를 실행하기 전에 일정 시간 동안 지연하는 것을 의미합니다. setTimeout() 只执行 fn 一次，到底什么时候执行取决于第二个参数millisec设定的毫秒数，所以很多人习惯上称之为延迟，无非就是延迟一段时间后再执行里面的代码。

setTimeout(function(){
 console.log(&#39;我是setTimeout&#39;);
}, 1000);

로그인 후 복사

正常情况下，我是setTimeout 这句话并不会马上输出而是等1000毫秒以后会在浏览器的控制台输出。

2、主菜，js是单线程的

OK，看一个例子，这个例子的输出结果是什么？

setTimeout(function(){
 console.log(1);
}, 0);
console.log(2);
console.log(3);

로그인 후 복사

出乎一些人的意料，得到的结果竟然是2、3、1。这似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接输出啊，为啥1却在最后输出了呢？

这就需要搞清楚一个很重要的概念：js是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

其实很好理解，就像大家去超市买东西一样，所有买东西的人都需要在收银台排队结账，正常情况下每个收银台同一时间只能为一位顾客结账，这位顾客结账完成才能为下一位顾客服务。

而浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。

javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。
GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。（当线程中没有执行任何同步代码的前提下才会执行异步代码）

其实，当js代码执行遇到setTimeout(fn,millisec)时，会把fn这个函数放在任务队列中，当js引擎线程空闲时并达到millisec指定的时间时，才会把fn放到js引擎线程中执行。

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout() 。

需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()

var debounce = function(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}

로그인 후 복사

일반적인 상황에서는 setTimeout이 됩니다. 이 문장은 즉시 출력되지 않고 1000밀리초 후에 브라우저 콘솔에 출력됩니다.
2. 메인 코스, js는 단일 스레드입니다

예, 이 예제의 출력은 무엇입니까?

setTimeout(function () {
 console.log(&#39;我被调用了&#39;);
 setTimeout(arguments.callee, 100);
}, 100);

로그인 후 복사

🎜어떤 사람들은 놀랍게도 결과가 2, 3, 1이 되었어요. 이는 루틴을 따르지 않는 것 같습니다. 분명히 0밀리초를 기다립니다. 즉, 기다리지 않고 바로 출력됩니다. 왜 마지막에 1이 출력됩니까? 🎜🎜이것은 매우 중요한 개념의 설명이 필요합니다. js는 단일 스레드입니다. 단일 스레드는 모든 작업을 대기열에 넣어야 하며 이전 작업이 완료될 때까지 다음 작업이 실행되지 않음을 의미합니다. 이전 작업이 오래 걸리면 다음 작업은 기다려야 합니다. 🎜🎜🎜사실 모든 사람이 슈퍼마켓에 물건을 사러 갈 때와 마찬가지로 물건을 사는 사람도 모두 계산대에 줄을 서야 합니다. 일반적인 상황에서는 각 계산대마다 한 명의 고객만 계산할 수 있습니다. 이 고객은 결제가 완료될 때까지 다음 고객에게 서비스를 제공할 수 없습니다. 🎜🎜브라우저의 커널은 동기화를 유지하기 위해 커널의 제어 하에 서로 협력합니다. 브라우저는 자바스크립트 엔진 스레드, GUI 렌더링 스레드, 브라우저 이벤트 트리거 스레드 등 최소 3개의 상주 스레드를 구현합니다. 🎜

🎜JavaScript 엔진은 이벤트 기반 단일 스레드 실행을 기반으로 합니다. JS 엔진은 작업 대기열에 작업이 도착하기를 기다렸다가 처리합니다. 브라우저는 JS 프로그램을 실행하는 JS 스레드가 하나만 있습니다. 🎜🎜
🎜 GUI 렌더링 스레드는 브라우저 인터페이스를 렌더링해야 하거나 일부 작업으로 인해 리플로우(리플로우)가 발생하는 경우 이 스레드가 실행됩니다. 그러나 GUI 렌더링 스레드와 JS 엔진은 상호 배타적이라는 점에 유의해야 합니다. JS 엔진이 실행되면 GUI 스레드가 일시 중지되고 GUI 업데이트가 대기열에 저장되었다가 JS 엔진이 실행될 때 즉시 실행됩니다. 게으른. 🎜🎜
🎜이벤트 트리거 스레드. 이벤트가 트리거되면 스레드는 보류 중인 대기열의 끝에 이벤트를 추가하고 JS 엔진의 처리를 기다립니다. 이러한 이벤트는 setTimeOut과 같은 JavaScript 엔진에 의해 현재 실행되는 코드 블록이나 마우스 클릭, AJAX 비동기 요청 등과 같은 브라우저 커널의 다른 스레드에서 발생할 수 있습니다. 그러나 JS의 단일 스레드 관계로 인해 모든 이벤트는 이러한 이벤트는 JS 엔진의 처리를 위해 대기열에 추가되어야 합니다. (스레드에서 동기 코드가 실행되지 않으면 비동기 코드가 실행됩니다) 🎜🎜

🎜실제로 js 코드 실행 중 setTimeout(fn, millisec)이 발생하면, fn 함수는 작업 대기열에 배치됩니다. js 엔진 스레드가 유휴 상태이고 millisec에 지정된 시간에 도달하면 fn이 실행을 위해 js 엔진 스레드에 배치됩니다. 🎜🎜setTimeout(fn,0)은 메인 스레드의 사용 가능한 가장 빠른 유휴 시간에 실행될 작업, 즉 최대한 빨리 실행되도록 지정하는 것을 의미합니다. "작업 대기열" 끝에 이벤트를 추가하므로 동기화 작업과 "작업 대기열"의 기존 이벤트가 처리될 때까지 실행되지 않습니다. 🎜🎜HTML5 표준에서는 setTimeout()의 두 번째 매개변수의 최소값(최단 간격)이 4밀리초보다 작으면 자동으로 증가하도록 규정하고 있습니다. 이전에는 이전 브라우저에서 최소 간격을 10밀리초로 설정했습니다. 또한 이러한 DOM 변경(특히 페이지 재렌더링과 관련된 변경)은 일반적으로 즉시 실행되지 않고 16밀리초마다 실행됩니다. 이때 setTimeout()보다 requestAnimationFrame()을 사용하는 것이 효과가 더 좋습니다. 🎜🎜setTimeout()은 이벤트를 "작업 대기열"에만 삽입한다는 점에 유의해야 합니다. 메인 스레드는 현재 코드(실행 스택)의 실행이 완료될 때까지 기다려야 합니다. 그것이 지정하는 콜백 함수. 현재 코드가 오래 걸리면 시간이 오래 걸릴 수 있으므로 setTimeout()에 지정된 시간에 콜백 함수가 실행된다는 보장은 없습니다. 🎜🎜🎜🎜3. Dessert, setTimeout의 놀라운 용도🎜🎜🎜🎜🎜실제로 setTimeout에는 몇 가지 훌륭한 용도가 있습니다. 여기에 몇 가지가 있습니다. 🎜🎜🎜함수 디바운스🎜🎜🎜

让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。比如当你在使用 google 搜索内容的时候，有些关键词输入到一半，谷歌会展示一个可选列表，根据你当前输入的内容作出的一个猜测联想。需要监听文字改变，每一次改变都会调用一次回调函数，现在需要的一种实现是在用户停止键盘事件一段时间后，去发送一个请求。

var debounce = function(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}

로그인 후 복사

轮训任务

js中可以使用setInterval开启轮询，但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。

比如有个轮询任务间隔是100ms，但是执行方法的时间需要450ms，那么在200ms、300ms、400ms本来是计划中执行任务的时间，浏览器发现第一个还未执行完，那么就会放弃2、3、4次的任务执行，并且在500ms之后再次执行任务，这样的话，其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。

setTimeout(function () {
 console.log(&#39;我被调用了&#39;);
 setTimeout(arguments.callee, 100);
}, 100);

로그인 후 복사

延迟js引擎的调用

var p = document.createElement(&#39;p&#39;);
p.innerHTML = &#39;我是一个p&#39;;
p.setAttribute(&#39;style&#39;, &#39;width:200px; height:200px;background-color:#f00; &#39;);
document.body.appendChild(p);
setTimeout(function() {
 console.log(&#39;我被调用了&#39;);
}, 1000);

로그인 후 복사

虽然setTimeout有一些妙用，但是他确实是在宏观任务队列中新增任务了，所以万万不能滥用啊。