setTimeout(fn,0)

最新推荐文章于 2020-06-04 19:17:18 发布

szwhjz8451

最新推荐文章于 2020-06-04 19:17:18 发布

阅读量415

点赞数

本文探讨了JavaScript中异步执行的机制，特别是在单线程环境下如何利用setTimeout改变任务执行顺序，解决DOM更新同步问题。并通过实例展示了不同事件监听器（如keypress、keyup）在DOM更新过程中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var fuc = [1,2,3];
for(var i in fuc){
  setTimeout(function(){console.log(fuc[i])},0);
  console.log(fuc[i]);
}

虽然setTimeout函数在每次循环的开始就调用了，但是却被放到循环结束才执行，循环结束，i=3,接连打印了3次3。

这里涉及到javascript单线程执行的问题：javascript在浏览器中是单线程执行的，必须在完成当前任务后才执行队列中的下一个任务。

另外，对于javascript还维护着一个setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。

所以在这个问题里，会先打印1 2 3，而将setTimeout任务放到setTimeout任务队列，等循环中的打印任务执行完了，才开始执行setTimeout队列中的函数，所以在最后会接着打印3次3。

由此，可以知道虽然设置为0秒后执行任务，实际上是大于0秒才执行的。可是这有什么用呢？

用处就在于我们可以改变任务的执行顺序！因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。

通过设置任务在延迟到0s后执行，就能改变任务执行的先后顺序，延迟该任务发生，使之异步执行。

(function(){
  function $(id){
    return document.getElementById(id);
  }
  $('input').onkeypress = function(){
    $('preview').innerHTML = this.value;
  }
})();

这个keypress函数原意是监听到用户输入字符串就将其完整的显示出来，但是奇怪的是最后一个字符串总是没能显示出来:

但是只要改下onkeypress函数就好：

  $('input').onkeypress = function(){
    setTimeout(function(){$('preview').innerHTML = $('input').value;},0);
  }

将onkeypress里面的事件延迟到浏览器更新相关DOM元素的状态之后执行，这是就能显示出所有字符串了，如下：

setTimeout()是用来改变任务执行顺序的，难道就没有其他代替的方法了吗？答案是有的。

将监听keypress事件改为监听keyup事件，一样能达到同样的效果:

$('input').onkeyup = function(){
  $('preview').innerHTML = $('input').value;
}

这里跟key事件的执行顺序有关:

复制代码

(function(){
  function $(id){
    return document.getElementById(id);
  }
  function log(a){
    console.log(a);
  }
  $('input').onkeypress = function(){
    log("keypress: "+this.value);
  }
  $('input').onkeyup = function(){
    log("keyup: "+this.value);
  }
  $('input').οnkeydοwn=function(){
    log("keydown: "+this.value);
  }
})();

复制代码

当用键盘输入1后，控制台打印结果如下：