提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示： 防抖函数不用闭包 避免污染全局变量

一、介绍 & 使用场景

基本介绍：

• 防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内的触发次数.
• 作用：减少触发频率，提高性能或者说避免资源浪费。

区别：

• 防抖 （多次触发 只执行最后一次）
• 节流 （规定时间内 只触发一次）

应用场景：

• 防抖：登录、短信验证等按钮避免用户点击太快，发行多次请求；调整浏览器窗口大小时，resize 次数过于频繁，计算过多，造成页面卡顿的情况；文本编辑器实时保存；搜索框等。

• 节流： 鼠标连续不断地触发某事件（如点击事件），单位时间内只触发一次；监听滚动事件，例如：懒加载；每隔多少秒计算一次相关数据。

---

二、源代码分享

1. 防抖

代码如下（示例）：

let timeout = null

/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function debounce(func, wait = 500, immediate = false) {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout)
    // 立即执行，此类情况一般用不到
    if (immediate) {
        const callNow = !timeout
        timeout = setTimeout(() => {
            timeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func()
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(() => {
            typeof func === 'function' && func()
        }, wait)
    }
}

export default debounce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2. 节流

代码如下（示例）：

let timer; let
    flag
/**
 * 节流原理：在一定时间内，只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, wait = 500, immediate = true) {
    if (immediate) {
        if (!flag) {
            flag = true
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func()
            timer = setTimeout(() => {
                flag = false
            }, wait)
        }
    } else if (!flag) {
        flag = true
        // 如果是非立即执行，则在wait毫秒内的结束处执行
        timer = setTimeout(() => {
            flag = false
            typeof func === 'function' && func()
        }, wait)
    }
}
export default throttle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31