【JS-工具类】防抖与节流---在定义时返回的是回调函数

 JS防抖和节流

• - 防抖：多次触发事件只执行一次
  •  管你娘的按多少次，老子只执行最后一此触发
• - 节流：一定时间内，但只执行一次事件 （一定时间内也可多次触发事件）
  •   你按，你尽管按，诶，我就只按自己的节奏来，任尔东西南北风

---

目录

防抖：多次触发事件只执行一次

节流：一定时间内执行一次事件

（onclick绑定 及 vue中@click绑定 使用时调用无效的解决方案！此处易犯错）

特别注意：防抖节流 在定义时 返回的是回调函数！！！

---

防抖：多次触发事件只执行一次

• 多次点击，只有一次执行

• ⭐代码思路：

  • timer存入防抖事件(存本次点击的防抖事件，利用定时器实现)

  • 点击判断timer是否已存在（即当前时间范围内是否已有防抖事件）

    • 若有，清除上一次

    • 若无，重新为timer存入防抖事件

  • 每次点击都会覆盖上一次的timer，直到最后一次不在带点击之后执行

//被执行防抖的事件函数
function fn(){console.log('debounce success!!')}
//定义防抖函数
function debounceFoo(foo,delay) {
    let timer;
    return function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(()=>{
            // 暂时理解不了（this，arguments）指向改变的问题
            foo.call(this,arguments)
            // 不输入延迟 则默认 1000 ms
        },delay || 1000)
    }
}
//绑定防抖函数
debounce.addEventListener('click',debounceFoo(fn,1000))

​​​​​​​关于，案例中，皆使用 addEventListener() 绑定 防抖节流 使用有原因的，看特别注意  

效果展示

CodePen Home 防抖https://codepen.io/sam9029/pen/PoRwyGa?editors=1010

---

节流：一定时间内执行一次事件

• -多次点击，可能有多次执行

• ⭐代码思路：

  • 若之前无timer，则存入节流事件

  • 若有，if判断中断函数

  • 注意在已有的timer执行之后，释放timer空间，即赋值为null

// 被执行节流的事件/函数
function fn(){console.log('throttle success!!')};

// 节流函数
function throttle(foo,delay){
    // foo-被执行节流的函数
    // 节流的节奏时间间隔

    // 初始化timer，并使用闭包访问
    let timer;
    return function(){
        // 若之前已有节流，中断函数执行
        if(timer) return;
        // 若（之前/此时）无节流，重新设定节流
        timer = setTimeout(()=>{
            // 暂时理解不了（this，arguments）指向改变的问题
            foo.call(this,arguments)
            // 本次节流执行后，通过给timer赋值null，释放timer
            timer = null
            // 不输入延迟 则默认 1000 ms
        },delay || 1000)
    }
}

// 给对应的(元素)对象绑定节流函数
elObject.addEventListener('chick/oninput/input……',throttle(fn,1000))

​​​​​​​关于，案例中，皆使用 addEventListener() 绑定 防抖节流 使用有原因的，看特别注意 

 效果演示：

 CodePen Home 节流https://codepen.io/sam9029/pen/PoRwymd?editors=0011

---

（onclick绑定 及 vue中@click绑定 使用时调用无效的解决方案！此处易犯错）

特别注意：防抖节流 在定义时 返回的是回调函数！！！

• 使用 addEventListener(事件类型，回调函数) ，便可以直接执行回调函数
• onclick绑定 及 vue中@click绑定 （❗❗❗❗以下写法是无效的❗❗❗❗）

<!-- 原生写法  -->
<div onclick='debounce(fn,1000)'></div>

<!-- Vue写法  -->
<div @click='debounce(fn,1000)'></div>

• 原因：onclick绑定 和 @click绑定  原理是直接调用，得到的是一个回调函数，并没有直接执行该回调函数
• addEventListener(事件类型，回调函数) 监听绑定 语法本身则直接执行回调函数

具体解析与详细解决方案看下文：

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行_半仙code的博客-CSDN博客https://blog.csdn.net/liz9411/article/details/108371934

---

！！！注意：⭐暂时理解不了 call（this，arguments）的this

• 先知道其作用是 让执行函数 匹配其的执行函数上下文中的this
• call,apply,bind 使用（ 待写）