疯狂面试

最新推荐文章于 2024-02-17 10:50:50 发布
天意pt
最新推荐文章于 2024-02-17 10:50:50 发布
阅读量495
点赞数
CC 4.0 BY-SA版权
分类专栏： Javascript
本文链接：https://blog.youkuaiyun.com/henrypt/article/details/58138944
Javascript 专栏收录该内容
24 篇文章
订阅专栏
本文探讨了JavaScript中setTimeout的功能及其实现异步执行的方法，同时解析了键盘、鼠标及焦点事件的执行顺序，并展示了如何利用setTimeout调整这些事件的触发时机。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
代码会输出什么？ 
  
   for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}应该是开始输出一个 5，然后每隔一秒再输出一个 5，一共 5 个 5。
这里涉及到javascript单线程执行的问题：javascript在浏览器中是单线程执行的，必须在完成当前任务后才执行队列中的下一个任务另外，对于javascript还维护着一个setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。

能输出 0 到 4: （闭包）for (var i = 0; i < 5; i++) {   (function(i){      setTimeout(function() { console.log(i);}, i*1000);     })(i);}

输出5次 5:for (var i = 0; i < 5; i++) {  (function() {    setTimeout(function() {      console.log(i);    }, i * 1000);  })(i);}
这里给 setTimeout 传递了一个立即执行函数。额，setTimeout 可以接受函数或者字符串作为参数，那么这里立即执行函数是? 
应该是个 undefined ，也就是说等价于： setTimeout(undefined, ...);
而立即执行函数会立即执行，那么应该是立马输出的。应该是立马输出 0 到 4 

对 Promise 了解
setTimeout(function() { console.log(1)}, 0);
new Promise(function executor(resolve) {  
  console.log(2);  
  for( var i=0 ; i<10000 ; i++ ) {    i == 9999 && resolve();  }  
  console.log(3);
}).then(function() { 
  console.log(4);
});
console.log(5);
首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。
然后是一个 Promise，里面的函数是直接执行的(new Promise)，因此应该直接输出 2 3 。
然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。
因此，应当先输出 5，然后再输出 4 。
最后在到下一个 tick，就是 1 。
“2 3 5 4 1”
js中setTimeout()时间参数设置为0的探讨
起因源于一道前端笔试题：
     
      var fuc = [1,2,3];
for(var i in fuc){
  setTimeout(function(){console.log(fuc[i])},0);// 3 3 3
  console.log(fuc[i]);//1 2 3
}
     
印结果如下：
 会先打印1 2 3，而将setTimeout任务放到setTimeout任务队列，等循环中的打印任务执行完了，才开始执行setTimeout队列中的函数，所以在最后会接着打印3次3。
 由此，可以知道虽然设置为0秒后执行任务，实际上是大于0秒才执行的。可是这有什么用呢？
用处就在于我们可以改变任务的执行顺序！因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。
通过设置任务在延迟到0s后执行，就能改变任务执行的先后顺序，延迟该任务发生，使之异步执行。
 
网上有个比较有意思的案例：
     
      
       
      
      <!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <title>图</title>
    <meta charset="utf-8">
  </head>
  <body>
  <p>
    <input type="text" id="input" value=""/>
    <span id="preview"></span>
  </p>
  </body>   
<script type="text/javascript">
(function(){
  function $(id){ return document.getElementById(id); }
  $('input').onkeypress = function(){
    $('preview').innerHTML = this.value;
  }
})();

      </script>
</html>
     
这个keypress函数原意是监听到用户输入字符串就将其完整的显示出来，但是奇怪的是最后一个字符串总是没能显示出来:
但是只要改下onkeypress函数就好：
     
      $('input').onkeypress = function(){
   setTimeout(function(){ $('preview').innerHTML = $('input').value; },0);
}
     
将onkeypress里面的事件延迟到浏览器更新相关DOM元素的状态之后执行，这是就能显示出所有字符串了
setTimeout()是用来改变任务执行顺序的，难道就没有其他代替的方法了吗？答案是有的。
将监听keypress事件改为监听keyup事件，一样能达到同样的效果:          这里跟key事件的执行顺序有关:
     
      $('input').onkeyup = function(){
  $('preview').innerHTML = $('input').value;
}
     
     
      (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);
  }
})();
     
也就是先执行keydown事件，再执行keypress事件，执行keypress事件之后改变dom元素的状态（这里是input的value改变了），
再执行keyup。这也解释了为什么通过监听keyup事件就能正确且及时的打印出input的值。
而keypress事件发生时，dom元素的状态还未改变，keypress事件之后dom元素的状态才发生改变，通过setTimeout延迟执行就能
达到期望的结果了。
测试过chrome，firefox，ie表现一致。
再来看看另一个例子，稍微有些改动，来自http://blog.youkuaiyun.com/lsk_jd/article/details/6080772：
     
      <!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39">
    <title>图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="utf-8"/>
  </head>
  <body>
    <h2>1、未使用 <code>setTimeout</code></h2>
     <button id="makeinput">生成 input</button>
     <p id="inpwrapper"></p>
      
     <h2>2、使用 <code>setTimeout</code></h2>
     <button id="makeinput2">生成 input</button>
     <p id="inpwrapper2"></p>
  </body>  
   <script type="text/javascript">
      (function(){
       function $(id){ return document.getElementById(id); }
          function log(a){ console.log(a); }
          window.onload = function(){
             $('makeinput').onmousedown=function(){
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');
                $('inpwrapper').appendChild(input);
                input.focus();
             }
             $('makeinput2').onmousedown = function(){
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');
                $('inpwrapper2').appendChild(input);
                setTimeout(function(){input.focus();},0);
             }
         }
     })();
   </script>
</html>
     
该例子中，未使用setTimeout生成的input没有获得focus，而使用了setTimeout的input可以获得focus，这也是和setTimeout改变任务执行顺序有关。
可是生成的input为什么不会focus呢？是这个focus没执行吗，通过给focus绑定一个事件就可以知道事实是怎样：
     
      
           $('makeinput').οnmοusedοwn=function(){
      
            var input = document.createElement('input');
      input.setAttribute('type', 'text');
      input.setAttribute('value', 'test1');
      $('inpwrapper').appendChild(input);
      input.onfocus=function(){log("focused");}//给生成的input绑定focus事件
      input.focus();
    } 
     
结果发现控制台有打印"focused"的，进一步猜测未使用setTimeout生成的input获取了focus又失去focus，改下代码看看mouse事件
和focus事件的执行顺序:
     
      
           
       $('makeinput').onmousedown = function(){
      
             var input = document.createElement('input');
       input.setAttribute('type', 'text');
       input.setAttribute('value', 'test1');
      
       $('inpwrapper').appendChild(input);
       input.onfocus = function(){ log("focused"); }
       input.focus();
       log("down");
     }
     $('makeinput').onfocus = function(){log("focus");}
     $('makeinput').onclick = function(){log("click");}
     $('makeinput').οnmοuseup=function(){log("up");}
     
可见先执行mousedown事件，然后生成的input获得focus，接着按钮获得focus，接着执行mouseup事件，再执行click事件，和key
的3个事件的执行顺序有些不同。
看到这里恍然大悟，这个生成的input确实是获得了focus，但是随之失去focus，因为按钮的mousedown事件紧跟着按钮的focus事
件，被按钮夺取了focus。将 input.focus(); 改为 setTimeout(function(){input.focus();},0);
也就是通过延迟执行input获取focus事件，最终就是生成的input获取了focus。
这样的话，通过绑定mouseup，click事件同样能使生成的input夺取按钮的focus事件，事实证明确实如此，就不贴代码上来了。
如果绑定focus事件会怎样呢？这一次，chrome和ie站在了统一战线，都是生成一个获取了focus的input，但有趣的是firefox居然生成了2个。
不过ie反应也不算正常，绑定mousedown时不使用setTimeout的输出是这样的orz：
 也就是focus事件好像不执行了，由于没有执行按钮的focus事件，生成的input是获得focus的，也就是不需要延迟执行函数，生成
的input也能获取focus。赶紧将input.focus()注释掉，发现打印出"focused"的地方替换成了"focus"，将生成input且获取focus的代码
绑定到其他mouse事件和focus事件得到的结果比较复杂，就暂且不做深究，但是可以知道按钮都能执行focus事件，除了绑
定mousedown事件忽略了focus事件。
原因不详，应该是和各浏览器对focus的具体实现有差异吧。看到的朋友若知道什么原因，欢迎告知。
 不过折腾了这么久，敢肯定setTimeout确实是实现异步执行的利器。这次对setTimeout的探讨也没有很深入，不过同时也弄清楚
了key事件、mouse事件和focus事件的执行顺序。