由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
让我们看看我之前的文章:JavaScript的9个陷阱及评点,在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差,其实不只是 IE 的问题,而是现有 JavaScript 引擎对于线程实现的问题(关于线程,我的概念其实不多,如果不对,希望读者多多指教)。我们通过一个例子来说明,我们来看 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>
原文地址:http://blog.csdn.net/lsk_jd/article/details/6080772
分享到:
相关推荐
深化理解setTimeout函数和setInterval函数_.docx
JavaScript使用setTimeout实现倒计时效果 为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以...
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的...
NULL 博文链接:https://rainbow702.iteye.com/blog/1668935
js中settimeout方法加参数.docx
JavaScript_window.setTimeout()_的详细用法
第一 JS延迟加载 代码如下: [removed][removed] [removed] setTimeout(“document.getElementById(‘my’).src=’include/common.php’; “,3000);//延时3秒 [removed] 一般情况下都是利用setTimeout来实现 ...
本文介绍了详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序,分享给大家,具体如下: 先举一个比较典型的例子: setImmediate(function(){ console.log(1); },0); setTimeout...
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method,下面这篇文章主要给大家介绍了关于setTimeout时间设置为0的相关资料...
js中settimeout方法加参数的使用实例.docx
设置指定的JS函数在指定的时间后执行,可以利用setTimeout()函数。
由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅...
} setTimeout : 延迟多长时间执行什么方法,具体使用://www.jb51.net/article/35535.htm opener: 指parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。在JS 中,...
javascript setTimeout()函数的三种使用方法,刷新页面的源代码 [removed] function myrefresh(){ [removed].reload(); } setTimeout('myrefresh()',20000); //指定1秒刷新一次 [removed]
关于JS定时器(setTimeout setInterval)定时不准问题1
有时候我们希望弹出层能够实现延迟关闭,并且鼠标在弹出层区域移动的时候能够保持显现,下面是具体的实现代码。
js中SetInterval与setTimeout用法.pdf