js进价复习

防抖

        避免短时间内高频连续触发函数，让其在固定时间内只执行一次。

        应用场景：闲着无聊疯狂点击按钮请求数据。

function debounce(fn, time) {
    var timer = null  //给一个值
    return function () {
        if(time) {
            clearTimeout(time)  // 当有定时器任务时说明点击过了，将其清除然后重新添加定时器
        }
        timer = setTimeout(fn, time)
    }
}

        VUE中点击事件的防抖处理

// 做防抖处理，防止频繁请求数据。
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer
  let flag = true
  let newFunc = func
  if (event == 'click') {
    newFunc = function () {
      if(flag) {
        func.apply(this,arguments) 
        flag = false
      }
      clearTimeout(timer)
      timer = setTimeout(function(){
        flag = true
      },500)
    }
  }
  on.call(this, event, newFunc)
}

节流

        执行一次后在指定时间内不会再执行。

function throttle(fn, time) {
    // 给一个函数定义状态
    var valid = false  
    return function () {
        // 工作状态下直接退出
        if(valid) {
            return false
        }
        // 开始工作
        valid = true
        setTimeout(()=>{
            fn()
            // 工作完毕，修改状态
            valid = false
        }, time)
    }
}