javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景

原创 2015年07月08日 10:53:45

在今天之前我一直以为setTimeout这个函数是异步的,无意中看到了一篇关于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 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(0) 的作用


版权声明:本文为博主原创文章,未经博主允许不得转载。

setTimeout的“异步”,执行顺序

都说故事是有起因的,果然不假。因为今天公司的一道年终考试题 ……… 对的没错,公司的年终考试,前后端都有直接上题目,以下代码的输出顺序…..(function () { console...
  • jayhkw
  • jayhkw
  • 2016年12月16日 16:09
  • 1812

理解javascript异步机制(setTimeout )

最近在学nodejs ,对于异步的概念早就理解了,但是,却有一个问题一直不解。 问题描述: javascript是一个单线程的语言,那他是如何实现异步的呢? 看了很多资料,终于找...
  • zhouyongwinner
  • zhouyongwinner
  • 2014年12月26日 17:19
  • 1843

setTimeout与js引擎的异步执行

从岁月如歌那里看到一篇文章,是说“大数组的分时优化处理”,讲述了如何使用timedChunk来改善用户体验,所谓timedChunk的确可以很大程度改善用户体验,但文章并无介绍这种优化性能方法的深层原...
  • kongls08
  • kongls08
  • 2011年11月21日 14:24
  • 5099

setTimeout “不执行”和异步

 前两天一直在做一个效果,想法很简单,就是希望能够在网页加载后导航项能够动态弹出,以下是代码:window.onload=init;function init(){var alink =null;al...
  • gorphone
  • gorphone
  • 2010年04月12日 18:50
  • 690

setTimeout运行机制

我们先看一段代码setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTi...
  • qingwenxiutong
  • qingwenxiutong
  • 2016年09月01日 11:25
  • 976

AJAX-与setTimeout()结合

通过ajax与定时器相结合,实现页面动态数据更新,常使用于提示信息。。 My JSP 'testAAJAx.jsp' starting page...
  • J080624
  • J080624
  • 2016年12月27日 14:53
  • 3234

关于setTimeout()阻塞的问题

function go_to_position(x, y) { var ele = document.getElementsByTagName("p")[0]; var x_now = parse...
  • InfOrange
  • InfOrange
  • 2016年12月10日 11:13
  • 633

关于SetTimeOut()方法的线程问题研究

今天在研究一个防止用户快速点击画面按钮,导致的ajax 出错问题时: 想着在开始点击的之后的把画面按钮的活性设为非活,后再最后执行之后在设为活性 代码如下: function  search(){ $...
  • jxqiaole
  • jxqiaole
  • 2015年05月14日 20:37
  • 747

setTimeout的工作原理

setTimeout(function(),ms)函数,Js文件中有这么一段代码:setTimeout( a() , 5000 );。   在执行流执行到setTimeout代码时,并不会原地踏...
  • qq_24193261
  • qq_24193261
  • 2016年05月25日 20:05
  • 458

js的setTimeout异步机制

(1) setTimeout的异步以及js是单线程的面试题 var t=true; window.setTimeout(function(){ t=false; },1000); wh...
  • tony19890820
  • tony19890820
  • 2014年06月15日 13:37
  • 1030
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
举报原因:
原因补充:

(最多只允许输入30个字)