扫码关注微信公众号

回复“面试手册”,获取本站PDF版

回复“简历”,获取高质量简历模板

回复“加群”,加入程序员交流群

回复“电子书”,获取程序员类电子书

当前位置: 前端 > javascript高频面试题 > 20.手写防抖与节流

防抖:在用户停止某个操作一段时间之后才执行相应的监听函数,当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行监听函数。

let debounce = (fn, wait) => {
	let timer, timeStamp=0;
	let context, args;
 
	let run = ()=>{
		timer= setTimeout(()=>{
			fn.apply(context,args);
		},wait);
	}
	let clean = () => {
		clearTimeout(timer);
	}
 
	return function(){
		context=this;
		args=arguments;
		let now = (new Date()).getTime();
		if(now-timeStamp < wait){ // 定时器期间,有新操作时,清空旧定时器,重设新定时器
			clean();
			run();
		}else{
			run();    // 定时器执行完毕,重设新定时器
		}
		timeStamp=now; // 记录本次操作时间
	}
 
}

节流:当持续触发事件时,保证隔间时间触发一次事件,固定周期内,只执行一次动作,若有新事件触发,不执行。周期结束后,又有事件触发,开始新的周期。


var throttling = (fn, wait) => {
	let timer;
	let context, args;
	let run = () => {
		timer=setTimeout(()=>{
			fn.apply(context,args);
			clearTimeout(timer);
			timer=null; // 定时器执行结束,timer设为null,下次事件触发再次执行定时器
		},wait);
	}
 
	return function () {
		context=this;
		args=arguments;
		if(!timer){ // 定时器期间,只执行最后一次操作
			run();
		}
	}
}

点击面试手册,获取本站面试手册PDF完整版