工信部网站首页,农业网站怎么做百度推广,wordpress 微商城模板下载,网站建设开票属于哪个名称在今天之前我一直以为setTimeout这个函数是异步的#xff0c;无意中看到了一篇关于setTimeout的文章。发现自己曾经的认识全是错误的#xff0c;赶紧总结下。 先看一段代码#xff1a; var start new Date();
setTimeout(function(){var end new Date();console.log(无意中看到了一篇关于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的值大概在1001ms左右肯定会超过1000ms。也就是说setTimeout失效了指定的函数并没有在500ms后运行。而是延迟到1000ms后才运行。 再看一段代码 function a()
{setTimeout(function(){console.log(1);},0);console.log(2);
}
a(); 执行这段脚本能够看到先打印2后打印1我们在setTimeout里面指定了0ms希望能马上执行可是实际上没有效果。 想要理解上面的2段代码我们得了解一下javascript中setTimeout的实现原理。首先牢记一点JavaScript 是单线程运行的也就是无法同一时候运行多段代码。以下这段解释来自这篇博客 JavaScript是单线程运行的无法同一时候运行多段代码。当某一段代码正在运行的时候全部兴许的任务都必须等待形成一个队列。一旦当前任务运行完毕再从队列中取出下一个任务这也常被称为 “堵塞式运行”。所以一次鼠标点击或是计时器到达时间点或是Ajax请求完毕触发了回调函数。这些事件处理程序或回调函数都不会马上运行而是马上排队。一旦线程有空暇就运行。假如当前 JavaScript线程正在运行一段非常耗时的代码此时发生了一次鼠标点击。那么事件处理程序就被堵塞。用户也无法马上看到反馈。事件处理程序会被放入任务队列。直到前面的代码结束以后才会開始运行。假设代码中设定了一个 setTimeout那么浏览器便会在合适的时间。将代码插入任务队列。假设这个时间设为 0就代表马上插入队列但不是马上运行。仍然要等待前面代码运行完成。所以 setTimeout 并不能保证运行的时间。是否及时运行取决于 JavaScript 线程是拥挤还是空暇。 也就是说setTimeout仅仅能保证在指定的时间过后将任务(须要运行的函数)插入队列等候并不保证这个任务在什么时候运行。运行javascript的线程会在空暇的时候自行从队列中取出任务然后运行它。javascript通过这样的队列机制。给我们制造一个异步运行的假象。 var start new Date();
setTimeout(function(){var end new Date();console.log(Time elapsed: , end - start, ms);
}, 500);console.log(task finished.);我们之所以会感觉到这段代码是在异步运行这是由于javascript线程并没有由于什么耗时操作而堵塞所以能够非常快地取出排队队列中的任务然后运行它。 如今我们知道了setTimeout的原理了如今看下setTimeout(0)的使用场景。以下这个样例来自这篇文章。 input typetext οnkeydοwnshow(this.value)
div/div
script typetext/javascriptfunction show(val) {document.getElementsByTagName(div)[0].innerHTML val;}
/script这里绑定了 keydown 事件意图是当用户在文本框里输入字符时。将输入的内容实时地在 div 中显示出来。可是实际效果并不是如此能够发现。每按下一个字符时div 中仅仅能显示出之前的内容无法得到当前的字符。 input typetext οnkeydοwnvar selfthis; setTimeout(function() {show(self.value)}, 0)
div/div
script typetext/javascriptfunction show(val) {document.getElementsByTagName(div)[0].innerHTML val;}
/script 这段代码使用了setTimeout(0)就能够实现需要的效果了。这里事实上涉及2个任务1个是将键盘输入的字符回写到输入框中。一个是获取文本框的值将其写入div中。第一个是浏览器自身的默认行为。一个是我们自己编写的代码。非常显然。必需要先让浏览器将字符回写到文本框。然后我们才干获取其内容写到div中。改变顺序这这正是setTimeout(0)的作用。 參考文章setTimeout(0) 的作用
