浅谈防抖与节流

用一句话总结防抖和节流的区别：

防抖：是将多次执行变为最后一次执行，

节流：是将多次执行变为每隔一段时间执行

1.函数防抖（debounce）

• 思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay(延迟)时间值，例如500ms
  如果在500ms内没有再次触发该事件，则执行函数
  如果在500ms内有再次触发事件，则清除当前的计时器，重新开始计时器

• 实现原理：
  实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现

1.函数节流（throttle）

• 思路：
  如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

• 实现原理：时间戳和定时器

封装公共js(public.js)

// 防抖:多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
export function debounce (fn, delay) {
     
  var timer
  var delay1 = delay || 200
  return function () {
     
    var th = this
    var args = arguments
    if (timer) {
     
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
     
      console.log(7777)
      timer = null
      fn.apply(th, args)
    }, delay1)
  }
}
// 节流:触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
export function throttle (fn, interval) {
     
  var last
  var timer
  var interval1 = interval || 200
  return function () {
     
    var th = this
    var args = arguments
    var now = +new Date()
    if (last && now - last < interval) {
     
      clearTimeout(timer)
      timer = setTimeout(function () {
     
        last = now
        fn.apply(th, args)
      }, interval1)
    } else {
     
      last = now
      fn.apply(th, args)
    }
  }
}

调用demo.vue

 <el-button class="btn-get" type="primary" :disabled="disabled" @click="ge()">cece</el-button>

使用方法methods:

methods:{
     
 // 防抖
      ge: debounce(function () {
     
        console.log(8888)
      }, 500),
}