定时器timer的进一步引用-优快云博客

本文介绍了JavaScript中的定时器(setTimeout和setInterval)的基本用法，并通过实例展示了如何利用setTimeout实现setInterval的功能，以及如何使用防抖(debounce)技术来避免事件处理函数的频繁触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


定时器:times的单位为毫秒。
var timer = setTimeout(fn,times); //在time时间以后执行函数fn.
如果times = 0，则表示，希望fn“尽可能快”的得到执行。


var timer = setInterval(fn,times);
//时间间隔为time,重复执行函数fn.如果fn的执行时间长于时间间隔times，那么接下来的那次将紧接着执行。
因此，如果希望每一次fn执行完了以后，经历时间间隔times都可以再一次执行(有可能被其它情况打断),
可以使用fn函数结尾调用setTimeout函数来实现。
setTimeout(function(){
	//processing
	setTimeout(arguments.callee, interval);
}, interval);


Timer的一个应用：
var processor = {
	timeoutId: null,
	//method that actually performs the processing
	performProcessing: function(){
		//actual processing code
	},
	//method that is called to initiate processing
	process: function(){
		//不过有没有执行，把它取消。
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = setTimeout(function(){
			that.performProcessing();
		}, 100);
	}
};
//try to start processing
processor.process();
在这个模式中，可以保证，即使在100毫秒以内process()被调用了多次，那么performProcessing最终也只会被执行一次。
可以用以下一个精简的函数实现上面的功能：

function throttle(method, context) {
	clearTimeout(method.tId);
	method.tId= setTimeout(function(){
		method.call(context);
	}, 100);
}
在IE中，window的resize事件会调用函数多次。我们可以通过throttle函数来消除这种问题。
function resizeDiv(){
	var div = document.getElementById("myDiv");
	div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
	throttle(resizeDiv);
};