微信公众号：路人zhang
扫码关注微信公众号

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

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

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

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

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

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();
		}
	}
}

本站链接：https://www.mianshi.online，如需勘误或投稿，请联系微信：lurenzhang888

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

javascript高频面试题