JS函数防抖和节流篇

事件频繁出发可能造成的问题？

• 一些浏览器时间window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
• 如果向后台发送请求、频繁出发，对服务器造成不必要的压力

如何限制事件处理函数频繁触发

• 函数节流
• 函数防抖

函数节流

1、理解：

• 在函数需要频繁触发后，函数执行一次后，只有大于设定的执行周期才能被触发第二次
• 适合多次事件按时间平均分配触发

2、场景

• 窗口调整（resize）
• 页面滚动（scroll）
• DOM元素拖拽功能实现（mousemove）
• 抢购疯狂点击（click）

3、手写函数节流

// 函数节流 大于一定周期才触发一次 返回一个函数
function throttle(callback, wait) {
	var start = 0;
	return (event)=> {
		// 只有当时间超过wait，才执行fn函数
		now = Date.now();
		if(now - start > wait) {
			callback(this,event);
			start = now; //重置开始时间为now
		}
	}
}

           

函数防抖

1、理解：

• input框输入内容，自动进行搜索时，在规定时间内，只让最后一次事件生效，其他的不生效。
• 适合多次事件一次响应的情况。

2、场景

• 输入框实时搜索联想（keyup、input）

3、手写函数防抖

function debounce(callback, wait) {
	var timer = null;
	return (e)=> {
		if(timer) {
		clearTimeout(timer)
		}
		timer = setTimeout(function(){
			callback.call(this,e);
			timer = null;
		},wait)
	}
}