防抖与节流的概念与实践场景

https://juejin.cn/post/6844903701514043400

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

防抖（debounce）

概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。（技能cd,不然无限技能）

场景：在实际上我们不需要高频反馈使用防抖节约不必要的性能

1.按钮提交场景``:防止多次提交,只提交最后一次.
2.搜索框联想场景``:用户在不断输入值时，用防抖来节约请求资源求,只发送最后一次输入.

简单实现：

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
          let context = this
          let args = arguments
          clearTimeout(timer) 
        }
        timer = setTimeout(function(){
            fn.apply(context,args) //绑定 this
        },delay) 
    }
}

节流 （throttle）

概念：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

场景：

可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

简单实现：

function throttle(fn,delay){
    let valid = true
    let context = this
    let args = arguments
    return function() {
       if(!valid){
           return false 
       }
       // 执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn.apply(context,args)
            valid = true;
        }, delay)
    }
}

🌰：

给界面中 3 个 input 输入框分别添加

• 不添加处理
• 添加防抖函数
• 添加节流函数

  function inputEvent() {
    const date = new Date()
    console.log('函数执行', '----', `${date.getMinutes()}：${date.getSeconds()}：${date.getMilliseconds()}`)
  }