防抖和节流

最近在做毕设，需要实现一个点赞的功能；在进行点赞的时候，不能够只要触发点击事件就让他进行点赞+1，这个时候就需要给他设置一个时差，点赞前和点赞后的这个时差内如果再次触发点击事件是不能够让他+1的，设置的这个时差就是我们的主角“节流”。

节流就是连续触发事件，在n秒内只触发一次。

//需要执行的事件
thumb() {
    console.log('点赞')
},
// 节流
throttle(wait) {
    let nowTime = Date.now()  // 获取现在的时间戳
    let dValue = nowTime - this.preTime  // 当前时间差
    this.preTime = nowTime
    if(dValue >= wait) { // 传入规定的时间差与当前的时间差进行比较
         this.thumb()
    }else {
        console.log("节流开启"); // 如果小于规定的时间差，就开启节流
    }
}
this.throttle(500) // 传入一个规定的时间差为500ms，在500ms内只触发一次

防抖是触发事件后n秒后再触发，如果n秒被再次触发就会重新计算事件的执行时间。

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;  // 防止this的指向发生变化
    const args = [...arguments];
    if (timeout) clearTimeout(timeout);  // 如果再次触发清除事件
    timeout = setTimeout(() => {  // wait秒后执行事件
       func.apply(context, args)
    }, wait);
  }
}

参考文章：