防抖和节流函数

防抖

当很频繁地（在设置的事件内）触发某一个回调的时候，只执行最后一次触发的回调。

应用场景：用户持续点击某一按钮（抢购某一商品）

// 防抖函数接收一个函数和延时时间
function debounce(fun, delay) {
	// 1.设置一个定时器变量
	var timer = null;
	return function() {
        // 清除上一次定义的定时器，保证只执行最后一次定时器里面的操作
		clearTimeout(timer);
		timer = setTimeout(() => {
			fun();
		}, delay)
	}
}
function fn() {
	console.log('sss')
}
window.addEventListener('scroll', debounce(fn, 2000))

节流

如果持续触发事件，则每隔一段时间才会触发一次。

应用场景：发送ajax请求，搜索功能获取提示信息，或者用于鼠标的跟随动画实现，scroll，resize, touchmove, mousemove等极易持续性促发事件的相关动画问题，降低频率

实现方式一：使用 setTimeout

function throttle(fun, delay) {
    // 定时器变量
	var timer = null;
	return function() {
        // 判断是否已经触发过一次回调了，触发过一次则等待上一次执行完
		if(!timer) {
			timer = setTimeout(() => {
				fun();
                // 执行完后就把定时器变量设为空，方便再执行下一次
				timer = null;
			}, delay)
		}
	}
}
function fn() {
	console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))

实现方式二：使用 时间戳

function throttle(func, delay) {
	// 设置一个变脸用于接收之前的时间戳
	var preTime = 0;
	return function() {
		// 获取当前的时间戳
		var now = Date.now()
		// 判断是否在delay时间间隔内，是就不执行，不是就执行
		if(now - preTime >= delay){
			func()
			// 将当前时间赋值给preTime 作为上一次执行的时间，以此来判断上一次和下一次执行的时间间隔
			preTime = now
		}
	}
}
function fn() {
	console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))

这两种实现的方式的不同点是：

使用setTimeout一开始执行就会有延迟，而使用时间戳的方式当第一次触发回调会立即执行

函数的防抖与节流都是优化性能的一种方式，目的都是，降低回调函数的执行频率，节省计算资源。