防抖和节流

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

1 . 防抖

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

可以借助react的ahooks库的useDebounce 或者是 lodash库中的_.debounce防抖

1 . 1 非立即执行版

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

// 防抖动函数
function debounce(func,delay) {
    let timer;
    return function() {
    	let context = this;
        if(timer) clearTimeout(timer) // 每次执行的时候把前一个 setTimeout clear 掉
        timer = setTimeout(()=> {
            func.apply(context,arguments)
        },delay)
    }
}
]

使用箭头函数，或者提前定义arguments，才能正确获得e，也就是arguments

1 . 2 立即执行版

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

// 防抖动函数-立即执行版
function debounce(func, delay) {
    let timer;
    return function () {
        let context = this;

        if (timer) clearTimeout(timer); // 每次执行的时候把前一个 setTimeout clear 掉

        let callNow = !timer;
        timer = setTimeout(() => {
            timer = null;
        }, delay)

        if (callNow) func.apply(context, arguments);
    }
}

1 . 3 防抖的应用场景:

• 限制 鼠标连击 触发
• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

2 . 节流

节流(throttle): 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

2 . 1 时间戳版：

function throttle(func, wait) {
    // 时间戳版
    let previous = 0;
    return function () {
        let now = new Date();
        if (now - previous > wait) {
            previous = now;
            func.apply(this, arguments)
        }
    }
}

2 . 2 定时器版：

function throttle(func, wait) {
    // 定时器版
    let timer;
    return function () {
        let context = this;
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, arguments)
            }, wait)
        }
    }
}

2 . 3 节流的应用场景:

• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹） -搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次