JS setTimeout延迟时间为0的详解
本篇文章来源于 麦客教程网(学吧频道) 原文链接:http://x8.maicoo.com/tech/javascript/17387.html,
wordoor.com
由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
让我们看看我之前的文章:JavaScript的9个陷阱及评点,在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差,其实不只是 IE 的问题,而是现有 JavaScript 引擎对于线程实现的问题(关于线程,我的概念其实不多,如果不对,希望读者多多指教)。我们通过一个例子来说明,请访问 http://realazy.org/lab/settimeout.html. 我们来看 1 和 2。如果你能看看源代码,会发现我们的任务很简单,就是给文档增加一个 input 文本框,并聚焦和选中。请现在分别点击一下,可以看到,1 并没有能够聚焦和选中,而 2 可以。它们之间的区别在于,在执行:
1.
input.focus();
input.select();
时, 2 多了一个延迟时间为 0 的 setTimeout 的外围函数,即:
2.
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!
演实网页源文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>setTimeout</title>
<script type="text/javascript" >
// bsd lisenced 2008 realazy
(function(){
// document.getElementById shorthand
function get(id){
return document.getElementById(id);
}
window.onload = function(){
get('makeinput').onmousedown = function(){
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('value', 'test1');
get('inpwrapper').appendChild(input);
input.focus();
input.select();
}
get('makeinput2').onmousedown = function(){
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('value', 'test1');
get('inpwrapper2').appendChild(input);
setTimeout(function(){
input.focus();
input.select();
}, 0);
}
get('input').onkeypress = function(){
get('preview').innerHTML = this.value;
}
}
})();
</script>
</head>
<body>
<h1><code>setTimeout</code></h1>
<h2>1、未使用 <code>setTimeout</code></h2>
<button id="makeinput">生成 input</button>
<p id="inpwrapper"></p>
<h2>2、使用 <code>setTimeout</code></h2>
<button id="makeinput2">生成 input</button></h2>
<p id="inpwrapper2"></p>
<h2>3、另一个例子</h2>
<p><input type="text" id="input" value=""/><span id="preview"></span></p>
</body>
</html>
JS setTimeout延迟时间为0的详解相关推荐
- 关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解 大海和星辰之间,是我们征途的方向: js是一种描述型的语言,由浏览器动态的解析与执行:严格来讲,js是单线程执行的,也就是说js脚本运 ...
- js中 javascript:void(0) 用法详解
javascript:void(0)表示不做任何动作.如: 复制代码代码如下: <a href="javascript:void(0);" οnclick="ale ...
- JS弹出窗口Window.Open详解
JS弹出窗口Window.Open详解 一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...
- JS中的日期和时间详解
JS中的日期和时间详解 关于Date()构造函数 简单实例 用Date()构造函数创建时钟 关于Date()构造函数 Date()构造函数是javascript的核心语言部分,用来创建表示时间和日期的 ...
- vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...
- Less(v3.9.0)使用详解—变量
该系列: Less(v3.9.0)使用详解--基本使用 Less(v3.9.0)使用详解--变量 Less(v3.9.0)使用详解--嵌套和父选择器& Less(v3.9.0)使用详解--ex ...
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- JS逆向之浏览器补环境详解
JS逆向之浏览器补环境详解 "补浏览器环境"是JS逆向者升职加薪的必备技能,也是工作中不可避免的操作. 为了让大家彻底搞懂 "补浏览器环境"的缘由及原理,本文将 ...
- HTTP 2.0 协议详解
HTTP 2.0 协议详解 一.HTTP 2.0:改进传输性能 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量.从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响. ...
最新文章
- python sin_Python sin() 函数
- 我开的慕课《机器学习》突破了1万人,回答几个问题
- html5大赛是什么,IE9开发大赛为HTML5打了一针兴奋剂
- JS---------正则表达式
- 禅道类似软件_软件测试工程师都在用哪些测试工具
- 大厂必背 MySQL最新面试题 - MySQL数据库优化
- Thinkpad T470 内置电池问题
- 论文写作中文核心期刊查询和中图检索号查询
- arduino+三引脚蜂鸣器YL-44(3pins)的简单使用
- JavaScript-- 基础知识面试题
- 打猎游戏——HTML版(JavaScript的应用)
- java opencv 添加图片水印
- WinRAR实用技巧:一个设置,可能让多文件压缩变得更小!
- 【Opencv】【C++】 Opencv之calcHist() 计算直方图
- 2本普通本科真的不能进入大厂吗?
- greenplum添加监控
- 2023 ChatGPT智能AI机器人微信小程序源码
- 2019年8月review汇总
- Spring Boot Freemark HTML 生成 PDF、生成水印Logo、docx文件生成PDF,Jar包运行可读取模板文件、字体文件
- 晶振使浙大食堂在年后摇身一变成网红食堂