函数防抖和节流

函数防抖和节流

1.作用

使用函数节流与函数防抖的目的，就是为了节约计算机资源，提高性能，提升用户体验

2.场景

• 节流一般是用在必须执行这个动作，但是不能够执行太频繁的情况下，例如滚动条滚动时函数的处理，可以通过节流适当减少响应次数；
• 防抖一般是用来，用户输入有操作时，暂时不执行动作，等待没有新操作时，进行相应响应，例如用户名输入校验的情况，可以等待用户输入完成后再发送请求去校验。

3.原理

防抖（debounce）

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

防抖函数分为非立即执行版和立即执行版。
非立即执行版：

function debounce(func, wait) {
   
    let timeout;
    return function () {
   
        let context = this;   //为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
   
            func.apply(context, args)
        }, wait);
    }
}

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

可以看到，在触发事件后函数 1 秒后才执行，而如果我在触发事件后的 1 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版：

function debounce(func,wait) {
   
    let timeout;
    return function () {
   
        let context = this