js函数节流与防抖

前端非常常用的两个函数，一定要自己理解使用

2020.02.19
评论
前端

前要：节流与防抖函数属于辅助嵌套函数，可使用闭包，这里演示只介绍原理前要：节流与防抖函数属于辅助嵌套函数，可使用闭包，这里演示只介绍原理

防抖debounce

  • 效果：当持续触发某事件时，在指定的触发间隔后，才触发一次。通俗一点来说，假设一直以很快的速度点击按钮，而在持续点击时不触发对应方法，只有在停止点击后的指定时间后再执行一次
  • 场景：常见作用于ajax请求发送控制、监听input输入框输入返回请求数据等

函数内容与解析

//将后续方法不断清空
var timer = ''//函数外部定义timer存放计时器
function debounce(info) {//info为一个对象，对象有两个参数 fn方法 与 del间隔
	if (timer) clearTimeout(timer)//函数一开始就判断是否存在计时器，如果存在，则清空
	timer = setTimeout(() => {//创建计时器且存放到timer中
		info.fn()//调用对象中的函数
	}, info.del)//调用对象中的间隔
}
 
// 使用参考
// function saya() {
// 	debounce({
// 		fn: () => {
// 			console.log('???')
// 		},
// 		del: 1000
// 	})
// }

节流throttle

  • 效果：当持续触发某事件时，在指定的触发间隔内，才触发一次。通俗一点来说，假设一直以很快的速度点击按钮，但只在规定的间隔后执行
  • 场景：常见作用于窗口滚动事件与窗口大小改变事件、懒加载等

函数内容与解析

节流的方法较多，这里使用时间戳演示，有利于理解

//将事件无限延后
var timer = '' //函数外部定义timer存放计时器
var last = 0 //函数外部定义last存放最后一次时间
function throttle(info) {
	let now = +new Date();//获取当前时间
	if (last && now < last + info.del) {//判断最后一次时间存在且当前时间小于最后时间加间隔
		clearTimeout(timer);//清除计时器
		timer = setTimeout(() => {//将计时器存放在timer
			last = now;//设置last时间为当前时间
			info.fn();//调用对象中的函数
		}, info.del);//调用对象中的间隔
	} else {
		last = now;
		info.fn();
	}
}
// 使用参考
//function saya() {
//	throttle({
//		fn: () => {
//			console.log('???')
//		},
//		del: 1000
//	})
//}