浅谈Javascript线程及定时机制


Posted in Javascript onJuly 02, 2015

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

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

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

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

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

Javascript 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
List the UTC Time on a Computer
Jun 11 Javascript
this和执行上下文实现代码
Jul 01 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
JavaScript获得url查询参数的方法
Jul 02 #Javascript
js跨域请求的5中解决方式
Jul 02 #Javascript
JS实现从连接中获取youtube的key实例
Jul 02 #Javascript
由ReactJS的Hello world说开来
Jul 02 #Javascript
深入理解JavaScript的React框架的原理
Jul 02 #Javascript
javascript实现简单的进度条
Jul 02 #Javascript
JavaScript实现添加、查找、删除元素
Jul 02 #Javascript
You might like
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
python图像处理之反色实现方法
2015/05/30 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
将python图片转为二进制文本的实例
2019/01/24 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
python 实现汉诺塔游戏
2020/11/28 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
化学教学随笔感言
2014/02/19 职场文书
治超工作实施方案
2014/05/04 职场文书
创建青年文明号材料
2014/05/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书