javascript中setTimeout(fn,0)的应用

JavaScript 2015年03月20日 ,

javascript

linkFly已经对setTimeout(fn, 0)进行了一番分析,详见这里。他对这个问题的理解很谨慎,多数观点枫竹梦是赞同的。本文主要介绍对setTimeout(fn, 0)的使用。

setTimeout延迟0毫秒的作用

首先说明延迟0毫秒与不延迟是不一样的,有文章分析说JavaScript的延迟最小是16毫秒,或者其他值,如http://blog.csdn.net/hax/archive/2006/12/19/1449403.aspx
http://blog.csdn.net/aimingoo/article/details/1449258

不管是多少,知道与不延迟不一样就行。

作用一:实现javascript异步。

浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

使用延迟达到异步的效果,并不是真正的异步。如:

console.log(1);
setTimeout(console.log(2), 0);
console.log(3);

运行该程序,将输出:

1
3
2

作用二:当前事件执行完成后再执行

简单说就是在执行完当前设置setTimeout(fn, 0)的函数之后,再执行fn函数。这句话到底在说什么,有什么用,看下面的例子。

实例

首先是HTML结构:

<h1><code>Demo 1</code></h1>
<p>点击按钮,生成一个input输入框,设置其默认值,并使其获得焦点,文本处于选中状态。</p>
<h2>1. Not use <code>setTimeout</code></h2>
<button id="makeinput">Make input</button>
<p id="inputwrapper"></p>
<h2>2. Use <code>setTimeout</code></h2>
<button id="makeinput2">Make input</button>
<p id="inputwrapper2"></p>
<h2>3. Not use <code>setTimeout</code> but return false</h2>
<button id="makeinput3">Make input</button>
<p id="inputwrapper3"></p>
<h1><code>Demo 2</code></h1>
<p>在输入框输入文本,然后同步显示。</p>
<h2>1. Not use <code>setTimeout</code></h2>
<input type="text" id="input1" value="" />
<div id="preview1"></div>
<h2>2. Use <code>setTimeout</code></h2>
<input type="text" id="input2" value="" />
<div id="preview2"></div>

然后就是Javascript代码:

(function(){
	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', 'I\'m here');
			get('inputwrapper').appendChild(input);
			input.focus();
			input.select();
		}

		get('makeinput2').onmousedown = function(){
			var input = document.createElement('input');
			input.setAttribute('type', 'text');
			input.setAttribute('value', 'I\'m here');
			get('inputwrapper2').appendChild(input);
			setTimeout(function(){
				input.focus();
				input.select();
			}, 0);
		}

		get('makeinput3').onmousedown = function(){
			var input = document.createElement('input');
			input.setAttribute('type', 'text');
			input.setAttribute('value', 'I\'m here');
			get('inputwrapper3').appendChild(input);
			input.focus()
			input.select();
			return false;
		}

		get('input1').onkeypress = function(){
			get('preview1').innerHTML = this.value;
		}

		get('input2').onkeypress = function(){
			setTimeout(function(){
				get('preview2').innerHTML = get('input2').value;
			}, 0);
		}
	}
})();

示例代码请点我

Demo1主要是实现点击按钮,生成一个input输入框,设置其默认值,并使其获得焦点,文本处于选中状态。不使用setTimeout函数,选中的状态会被接下来的对Make input按钮的onfocus事件取消掉,实际看不到效果。浏览器认为点击按钮,按钮要获得焦点。

使用setTimeout函数,将会在执行完对Make input按钮的onfocus事件后,再执行对新产生input的focus命令和对其value的select命令。所以可以得到期望的结果。

不使用setTimeout函数,但是在onmousedown中return false也是可行的。因为这样将不会再继续执行onmousedown函数。

Demo2是在输入框输入文本,然后同步显示。同样DOM元素中的值需要在onkeypress执行之后才有值。所以使用setTimeout函数后可以得到期望的效果。

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《javascript中setTimeout(fn,0)的应用》
日志链接:http://furzoom.com/javascript-settimeout-0/
博客名称:枫竹梦

【上一篇】
【下一篇】

发表评论

插入图片

NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复!

回到顶部