浅谈Javascript线程及定时机制

时间:2020-05-14 人气:0

setTimeout、setInterval的使用

　　Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行。但随着工作经验的积累，我们发现事实并非如此。

　　比如

div.onclick=function(){
  setTimeout(function(){
     document.getElementById('input').focus(); 
  },0);
}

就解释不通了，立即执行就立即执行呗，干嘛还要设置个定时兜个圈子呢。

　　又有一天你写了下面一段代码

setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);

第一行代码死循环，结果造成第二行alert始终没有出现，为啥哩？

单线程or多线程?
　　原来，Javascript引擎是单线程运行的，浏览器只有一个线程在运行JavaScript程序。因为单线程的设计，所以免去了复杂的多线程同步问题。

　　当设置一个定时的时候，浏览器会在设定的时间后将你指定的回调函数插入任务序列，而非立即执行。如果设定定时时间为0，表示立即插入任务序列，而不是立即执行，仍然要等队列中任务执行完毕，轮到你，你才执行。

　　所以下面代码先弹出2，再弹出1

setTimeout(function(){
  alert(1);
},0);
alert(2);

　　那么，这又有什么实际用途呢？且看下面示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>setTimeout 0</title>
  </head>
  <body>
    输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
    输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
    <div></div>
    <script>
      function show(val){
        document.getElementsByTagName("div")[0].innerHTML=val;
      }
    </script>
  </body>
</html>

　　这个例子中，js引擎需要执行keydown事件处理程序，然后更新输入框的value值。事件处理程序执行时，更新value的任务只能进入队列等待，所以keydown事件执行时无法得到更新后的value值；但通过setTimeout我们把取value的操作放入队列，并在更新value之后执行，所以内容就能实时显示了。

　　再回来看看下面的代码：

setTimeout(function(){
  /https://img.qb5200.com/download-x/do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  /https://img.qb5200.com/download-x/do something...
},10);

这两段代码看起来效果一样，是不是。其实还是有区别的，第一段的回调函数内的setTimeout是js引擎执行后再设定的新的定时，假定从上一个回调处理完到下一个回调开始为一个时间间隔，理论上时间间隔>=10ms，后一段代码<=10ms。

　　说到这儿，那XMLHttpRequest是不是真的异步呢？是的，请求是异步的，不过这请求是浏览器新开的一个线程。当请求的状态变更时，如果先前已设置回调，异步线程就将状态变更事件放入js引擎处理队列中等待处理，当任务被处理时js引擎始终还是单线程地执行onreadystatechange所设置的函数的。

以上所述就是本文的全部内容了，希望大家能够喜欢。

加载全部内容