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

setTimeout等于0发生了什么

Javascript Xueqi 3905℃ 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发生了什么

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(23)个小伙伴在吐槽
  1. 学海无涯,博客有道!拜读咯!
    健康网2017-10-25 16:14 回复
  2. 这样精彩的博客越来越少咯!
    中青看点2017-12-15 12:39 回复
  3. 新年好呀,新年好呀,祝福博主新年好!
    八达网2018-01-02 14:39 回复
  4. 毫无疑问,这个是要支持的!
    套图网2018-01-08 09:23 回复
  5. 博客还真是个好东西!
    11638488992018-01-27 19:50 回复
  6. 不错不错!内容感觉好极了!
    xing19822018-02-04 16:20 回复
  7. 一个博客能让人流连忘返,讲真,靠的是实力!
    xiyue2018-05-12 08:36 回复
  8. 拜读了,多多学习总是好的!
    3566882018-05-24 18:35 回复
  9. 第一次看,感觉还挺新鲜!
    kitty232018-06-18 11:10 回复
  10. 炎热夏天,闲来无事,拜读博客,消暑解闷!
    9482018-06-22 08:01 回复
  11. 从百度点进来的,学习学习,呵呵!
    爱就爱啦2018-07-05 15:01 回复
  12. 炎热的夏天,看到这样的博客瞬间清凉了许多!
    闺房独自乐2018-07-14 09:26 回复
  13. 这里真心不错,每次来都有新收获!
    大喜2018-08-15 19:09 回复
  14. 三天两头过来看一看,每次看完都有新体验!
    9482018-08-26 09:48 回复
  15. 认真拜读,好为学徒!
    藏阴套图网2018-09-19 23:18 回复
  16. 呵呵。学习了。感触良多!
    罗拉2018-10-01 14:51 回复
  17. 学无止境,认真拜读!
    daxi2018-11-04 10:52 回复
  18. 来看看,因为,总能学到东西!
    xing2018-11-11 17:15 回复
  19. Ye ! This Is A Good Blog!
    luo.la2018-12-26 11:27 回复
  20. Hello There! Have A Good Day!
    hailporn2019-01-16 18:27 回复
  21. 真心不错,不得不支持一下先!
    蚂蚁乐居2019-05-16 10:15 回复
  22. 蚂溪村路板桥斜, 蚁间第一耽离别。 乐飞萤度愁难歇, 居士尔时缘护戒。
    分类目录2019-05-29 15:13 回复
  23. 来了一次又一次,总是情不自已!
    www.mayileju.com2019-06-10 08:33 回复