IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

setTimeout等于0发生了什么

Javascript Xueqi 1565℃ 0评论
<script>
var a=10;
setTimeout(function(){
   console.log(a); //这里的输出是什么?
   a=999;
},0);

a=998; //后面的赋值中
按正常逻辑来说,a应该输出是全局变量的a,即等于10,因为setTimeout的时间设置为0,
那么它马上执行,执行那console.log()那句话的时候,a=999,和函数外面的a=998都还没有执行,
所以,a输出的值是10 .

但是浏览器运行后输出的结果却让我们大吃一惊: 输出的是998
这到底是为什么呢?
再来看看下面的这几个例子:
setTimeout(function () {
    console.log("这是setTimeout的代码····");
}, 0);
   console.log("这是第一个script里面的代码");
</script>

<script>
console.log("这是第二个script的代码1");
console.log("这是第二个script的代码2");
console.log("这是第二个script的代码3");
</script>
代码运行结果:

外面的代码···

这是第二条script的代码1

这是第二条script的代码2

这是第二条script的代码3

这是setTimeout的代码····
<script>
异步执行的代码在最后进行了输出:

原因分析:
由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
(当线程中没有执行任何同步代码的前提下才会执行异步代码)
解释2:
在浏览器中,JavaScript引擎是单线程执行的。
也就是说,在同一时间内,只能有一段代码被JavaScript引擎执行。
页面加载时,JavaScript引擎会顺序执行页面上所有JavaScript代码,优先执行同步代码。
而异步代码由事件触发引擎按照“事件发生”的顺序添加到JavaScript引擎的任务队列中,待所有同步代码执行结束后,JavaScript引擎会按照任务队列中的顺序来执行异步代码。

所以:
setTimeout或者setInterval的设置的时间参数的可以理解为:在参数指定的时间后将待执行方法放到执行队列中,

setTimout函数中第二个参数如果为负数,则和0具有一样的效果,如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
另外:setTimeout的时间参数设置为负数时,效果和设置成0相同
setTimeout(function(){
console.log("这是setTimeout的代码:");
},-1000);
效果等于
setTimeout(function(){
console.log("这是setTimeout的代码:");
},0);
另外,如果settimeOut第二个参数如果不写的话,效果上也相当于写成0

settimeout(0)的作用

不同浏览器的实现情况不同,HTML5定义的最小时间间隔是4毫秒. (待验证)
使用settimeout(0)会使用浏览器支持的最小时间间隔.
所以当我们需要把一些操作放到下一帧处理的时候,我们通常使用settimeout(0)来hack.
//最后,思考一下下面这个例子的输出吧

var startTime = new Date();
setTimeout(function () {
  console.log(new Date() - startTime);
  console.log("setTimeout执行结束····");
}, 100)
function Test(status_div) {

var result = 0;
   for (var i = 0; i < 1000; i++) {
       for (var j = 0; j < 700; j++) {
         for (var k = 0; k < 300; k++) {
            result = result + i + j + k;
          }
        }
   }
 console.log("result=",result);
 console.log("for循环执行结束····");
}
Test();

总结:
JS总是会先执行同步的代码,异步的事件按建立事件的顺序放入异步事件任务队列中,
当同步的代码执行完成,就会依次执行异步的事件队列里的事件/方法,预期延时时间相同的两个任务,按照注册的先后顺序执行

参考文章:
  http://www.cnblogs.com/zhaodongyu/p/3922961.html
1.http://www.suchso.com/projecteactual/Javascript-setTimeout-timer.html
2.http://www.phpv.net/html/1700.html
3.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
</script>

转载请注明:凌风阁 » setTimeout等于0发生了什么

喜欢 (31)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址