认识延迟时间为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 02 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
用函数式编程技术编写优美的 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
javascript self对象使用详解
2016/10/18 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
python time.strptime格式化实例详解
2021/02/03 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
工程造价与管理专业应届生求职信
2013/11/23 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
python opencv通过4坐标剪裁图片
2021/06/05 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
 python中的元类metaclass详情
2022/05/30 Python