三原 | 三原

防抖

TIP

什么是防抖函数呢？就是在我多次触发的时候就执行我最后触发一次。这个样能大大减少不必要的性能。例如：我一个保存按钮用户一直再用鼠标点，这个时候在没做任何处理的情况下快速多次点击，正常是回触发多次，就一直在往后端发请求。多少会性能浪费，咱们只需要执行最后一次即可，也就是今天说的防抖。

//不从封装函数的角度出发,save就是咱们的按钮触发的事件：
let time;
function save() {
  if(time) { 
    clearTimeout(time); // time 为真的情况下 一直清除上次的setTimeout
 }

  time = setTimeout(() => { // time 会是一个不固定的数值类型
      clearTimeout(time);
      time = null;
      console.log('我是保存按钮的事件')
  }, 1000)
}

封装防抖方法

TIP

你的程序中必须要有一个封装好的防抖方法，保持初心，在会的情况下可以使用lodash工具库。

//封装成一个通用的防抖函数
function debounce(fn, interval) {
    let time;
    return function() {
        let args = arguments;
        if(time) { clearTimeout(time) }

        time = setTimeout(() => {
            fn.apply(this, args)
            clearTimeout(time)
            time = null;
        }, interval || 500)
    }
}

//save按钮使用方式
const save = debounce(function() {
    console.log('我是save函数添加了防抖事件')
    //就可以再下面添加自己的逻辑了
}, 1000)

节流

TIP

什么是节流函数？跟防抖有什么区别？节流首次先调用一次，再多次触发的时间内比如30秒，定义的节流函数是10秒那么再尼连续点击的时间内会触发3次。这就是节流函数（防抖在频繁操作只触发最后一次）

let time, firstTime = true;
function save() {
    if(fistTime) {
        console.log('我是save的节流事件,我首次触发立刻调用')
        return firstTime = false;
    }
    if(time) return // time 为真 return 操作，等为假在往下执行。
    time = setTimeout(() => { // time 会是一个不固定的数值类型
        clearTimeout(time);
        time = null;
        console.log('我是save的节流事件')
    },1000)
}

封装节流方法

TIP

你的程序中必须要有一个封装好的节流方法，保持初心，在会的情况下可以使用lodash工具库。

function throttle(fn, interval) {
    let time, firstTime = true;

    return function() {
        const args = arguments;
        const _m = this;
        if(firstTime) {
          fn.apply(_m, args)
          return firstTime = false;
        }


        if(time) return
        time = setTimeout(() => {
            fn.apply(_m, args)
            clearTimeout(time);
             time = null;
        }, interval || 500)

    }
}

//给save 添加节流事件
const save = throttle(() => {
    console.log('我是save的节流函数')
}, 1000)

防抖 ​

封装防抖方法 ​

节流 ​

封装节流方法 ​

防抖

封装防抖方法

节流

封装节流方法