防抖和节流

防抖 (debounce)

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版。

非立即执行版

function debounce(func, wait) {
	let timer
	return function(...args) {
		if (timer) clearTimeout(timer)

		timer = setTimeout(() => {
			func.apply(this, args)
		}, wait)
	}
}

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版

function debounce(func, wait) {
	let timer
	return function(...args) {
		if (timer) clearTimeout(timer)
			
		let callNow = !timer
		timer = setTimeout(() => {
			timer = null
		}, wait)
		if (callNow) func.apply(this, args)
	}
}

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

在开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来，实现最终的双剑合璧版的防抖函数。

双剑合璧版

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func, wait, immediate) {
	let timer
	return function(...args) {
		if (timer) clearTimeout(timer)

		if (immediate) {
			let callNow = !timer
			timer = setTimeout(() => {
				timer = null
			}, wait)
			if (callNow) func.apply(this, args)
		} else {
			timer = setTimeout(() => {
				func.apply(this, args)
			}, wait)
		}
	}
}

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。 对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳版

function throttle(func, wait) {
    let previous = 0;
    return function(...args) {
        let now = Date.now();
        if (now - previous >= wait) {
            func.apply(this, args);
            previous = now;
        }
    }
}

定时器版

function throttle(func, wait) {
	let timer
	return function(...args) {
		if (timer) return
		timer = setTimeout(() => {
			func.apply(this, args)
			timer = null
		}, wait)
	}
}

可以看到，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。 我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。 同样地，我们也可以将时间戳版和定时器版的节流函数结合起来，实现双剑合璧版的节流函数。

双剑合璧版

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait, type) {
	let timer, previous = 0
	return function(...args) {
		if (type == 1) {
			let now = Date.now()
			if (now - previous >= wait) {
				func.apply(this, args)
				previous = now
			}
		} else {
			if (timer) return
			timer = setTimeout(() => {
				func.apply(this, args)
				timer = null
			}, wait)
		}
	}
}