认识延迟时间为0的setTimeout


Posted in Javascript onMay 16, 2008

让我们看看我之前的文章:JavaScript的9个陷阱及评点,在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差,其实不只是 IE 的问题,而是现有 JavaScript 引擎对于线程实现的问题(关于线程,我的概念其实不多,如果不对,希望读者多多指教)。. 我们来看 1 和 2。如果你能看看源代码,会发现我们的任务很简单,就是给文档增加一个 input 文本框,并聚焦和选中。请现在分别点击一下,可以看到,1 并没有能够聚焦和选中,而 2 可以。它们之间的区别在于,在执行:

input.focus();
input.select();
时, 2 多了一个延迟时间为 0 的 setTimeout 的外围函数,即:

setTimeout(function(){
 input.focus();
 input.select();
}, 0);
按照 JavaScript: The Definitive Guide 5th 的 14.1 所说:

在实践中,setTimeout 会在其完成当前任何延宕事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数。

其实,这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子,JavaScript 引擎在执行 onkeypress 时,由于没有多线程的同步执行,不可能同时去处理刚创建元素的 focus 和 select 事件,由于这两个事件都不在队列中,在完成 onkeypress 后,JavaScript 引擎已经丢弃了这两个事件,正如你看到的例子 1 的情况。而在例子 2 中,由于setTimeout可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此,你可以看看例子 3,它的任务是实时更新输入的文本,现在请试试,你会发现预览区域总是落后一拍,比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时, a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地,在此我没有给出答案,因为上面所说的,就是解决思路,try it yourself! 

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 #Javascript
Javascript模块模式分析
May 16 #Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 #Javascript
直接生成打开窗口代码,不必下载
May 14 #Javascript
地震发生中逃生十大法则
May 12 #Javascript
通过修改referer下载文件的方法
May 11 #Javascript
JS启动应用程序的一个简单例子
May 11 #Javascript
You might like
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php写的简易聊天室代码
2011/06/04 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
关于react-router的几种配置方式详解
2017/07/24 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python中logging包的使用总结
2018/02/28 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python PyQt5整理介绍
2020/04/01 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python实现学生通讯录管理系统
2021/02/25 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
教你打造完美的创业计划书
2014/01/06 职场文书
结婚典礼致辞
2015/07/28 职场文书
干部考核工作总结
2015/08/12 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android