防抖动和节流阀

前言

网页生成的时候，至少会渲染（Layout+Paint）一次。用户访问的过程中，还会不断重新的重排（reflow）和重绘（repaint）。用户 scroll 和 resize 行为（即是滑动页面和改变窗口大小）会导致页面不断的重新渲染。scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），下面介绍两种常用的解决方法防抖和节流。

防抖（Debouncing）

防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。

window.addEventListener('scroll',debounce(realFunc,500))
//优化滚动效果防抖动
function debounce(fn,time){ 
    var timeout = null;
    return function() {
            clearTimeout(timeout)
            timeout = setTimeout(fn,time) 
    }
}
function realFunc() {
    console.log('this is real callback function')
}

原理：

• 首先，我们为scroll事件绑定处理函数，这时debounce函数会立即调用，因此给scroll事件绑定的函数实际上是debounce内部返回的函数

• 每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用。这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发

• 只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行继续优化的写法：不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。

window.addEventListener('scroll', debounce(realFunc, 500, true))
//优化滚动效果防抖动
function debounce(fn, time, immediate) {
	var timeout = null;
	return function() {
		if (timeout) {
			clearTimeout(timeout)
		}
		if (immediate) {
			//根据距离上次触发操作的时间是否到达delay来决定是否要现在执行函数
			var doNow = !timeout
			//每一次都重新设置timer，就是要保证每一次执行的至少delay秒后才可以执行
			timeout = setTimeout(function() {
				timeout = null
			}, time)
			//立即执行
			if (doNow) fn()
		} else {
			timeout = setTimeout(fn, time)
		}
		console.log('after' + timeout)
	}
}

function realFunc() {
	console.log('this is real callback function')
}

节流（Throttling）

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。

这个时候，我们希望即使页面在不断被滚动，但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，就要用到另一种技巧，称为节流函数（throttling）。节流函数，只允许一个函数在 X 毫秒内执行一次。

与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，同样是利用定时器，看看简单的示例：

window.addEventListener('scroll', throttle(realFunc, 500, 1000))
//优化滚动效果节流
function throttle(fn, time) {
	var timeout,
		startTime = new Date()
	return function() {
		var context = this,
			args = arguments,
			curTime = new Date()，
		remaining = time - (curTime - startTime);
		clearTimeout(timeout)
		if (remaining <= 0) {
			fn.apply(context, args)
			startTime = curTime
		} else {
			timeout = setTimeout(fn, remaining)
		}

	}
}

function realFunc() {
	console.log('this is real callback function')
}

使用 rAF（requestAnimationFrame）触发滚动事件

上面介绍的抖动与节流实现的方式都是借助了定时器 setTimeout ，但是如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame）。

requestAnimationFrame 的基本原理是：每次浏览器重绘之前，都会调用一次传入的回调函数。因此，通过递归调用 requestAnimationFrame，可以实现一个类似定时器的效果，但它的执行频率会与屏幕刷新率同步，从而避免不必要的计算和渲染，减少资源浪费和性能损耗。

function handleScroll() {
    console.log('滚动事件被触发');
}

function rafThrottle(callback) {
    let isScheduled = false; // 标记是否已经安排了回调函数的执行。如果已经安排了回调，则不会重复触发，从而实现节流的效果。

    return function () {
        if (!isScheduled) {
            isScheduled = true; // 设置标记

            // 这里的双层嵌套目的是为了确保回调函数在下一次屏幕刷新时执行，而不是在当前帧中立即执行。
            window.requestAnimationFrame(() => {
                window.requestAnimationFrame(() => {
                    callback(); // 执行回调函数
                    isScheduled = false; // 清除标记
                });
            });
        }
    };
}

// 绑定滚动事件
window.addEventListener('scroll', rafThrottle(handleScroll));

节流效果: 由于 isScheduled 的存在，即使滚动事件频繁触发，回调函数也只会以屏幕刷新率（通常是 60fps）执行一次，从而避免了过度计算和性能问题。

简单而言，使用 requestAnimationFrame 来触发滚动事件，相当于上面的：

throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler