浅谈Javascript线程及定时机制

网络编程 2024/11/21 佚名

3 1 2

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多线程"htmlcode">

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(){
  //do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  //do something...
},10);

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

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

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

Javascript,线程,定时机制

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“浅谈Javascript线程及定时机制”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月21日

浅谈Javascript线程及定时机制

JavaScript实现点击自动选择TextArea文本的方法

JavaScript获得url查询参数的方法

评论“浅谈Javascript线程及定时机制”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接