JavaScript防抖节流函数了解一下

总结一下防抖节流函数

节流（throttle）

  • 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

  • 节流会稀释函数的执行频率。

  • 使用场景：

    搜索联想，用户在不断输入值时，用防抖来节约请求资源
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
比如是否滑到底部自动加载更多，用throttle来判断
写法一 (时间戳)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @desc 节流函数
 * @param fn 函数
 * @param time 延迟执行毫秒数
 * @return function 返回一个函数
 */
function throttle (fn, time) {
    var next = null
    return function () {
		const context = this
		const args = arguments
		const now = Date.now()

		if (now - next > time) {
			fn.apply(context, args)
			next = now
		}
	}
}
写法二 (定时器)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @desc 节流函数
 * @param fn 函数
 * @param time 延迟执行毫秒数
 * @return function 返回一个函数
 */
function throttle (fn, time) {
	var next = null
	return function () {
		const context = this
		const args = arguments
				
		if (!next) {
			next = setTimeout(() => {
				next = null
				fn.apply(context, args)
			}, time)
		}
	}
}
防抖（debounce）

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

  • 使用场景：

    鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * @desc 防抖函数
 * @param fn 函数
 * @param time 延迟执行毫秒数
 * @return function 返回一个函数
 */
function debounce (fn, time) {
	var timer = null
	return function () {
		const context = this
		const args = arguments

		timer && clearTimeout(timer)
	  timer = setTimeout(() => fn.apply(context, args), time)
	}
}
附：

mqyqingfeng大佬的文章