节流和防抖

一、什么是防抖（debounce）

原理：事情触发后，等待一段时间再执行回调，如果在这段时间内再次触发，则重新计时

应用场景：

1、输入框实时搜索

2、窗口大小调整resize

3、防止表单重复提交

二、什么是节流（throttle）

原理：在一定时间间隔内，只执行一次回调函数，不管事件触发了多少次

应用场景：

1、页面滚动事件scroll（比如监听页面滚动到底部加载下一页）

2、按钮频繁点击事件（防止重复提交）

3、鼠标异动mousemove

实现原理与代码

防抖实现

原理：每次事情触发时，清除上一个定时器并重新设置新的定时器，直到时间停止触发后延迟delay毫秒执行

手写防抖函数（不依赖Lodash）

function debounce(fn, delay) {
　　let timer = null
　　return function (...args) {
　　　　if (timer) {
　　　　　　clearTimeout(timer)
　　　　}
　　　　timer = setTimeout(() => {
　　　　　　fn.apply(this, args)
 9 　　　　}, delay)
　　}
}

在vue中使用手写防抖函数

可以将debounce函数定义在methods或者单独放在一个utils.js文件中，在组件中引用并使用它

html

<el-input v-model="keyword" @input="debouncedSearch" placeholder="请输入关键词搜索"></el-input>

js

export default {
  methods: {
    // 手写防抖函数
    debounce(fn, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    },
    // 搜索方法
    searchKeywordHandler() {
      this.currentTableType = 'search';
      this.searchByKeyword();
    },
    mounted() {
      // 使用 debounce 包裹搜索方法
      this.debouncedSearch = this.debounce(this.searchKeywordHandler, 300);
    }
  }
}

如果保留lodash/debounce

import debounce from 'lodash/debounce'

methods: {
  searchKeyword: debounce(function () {
    this.currentTableType = 'search'
    this.searchByKeyword()
  }, 300)
}

节流实现

原理：记录上一次执行时间，比较当前时间与上一次的时间差，只有达到delay时才执行

function throttle(fn, delay) {
    let lastTime = 0
    return function (...args) {
        let nowTime = Date().now()
        if (nowTime - lastTime >= delay) {
            fn.apply(this, args)
            lastTime = nowTime
        }
    }
}        

如果保留lodash/throttle

import throttle from 'lodash/throttle'

handleCopy: throttle(function (row, $index) {
  this.markContactUsed(row.id)
  let refsName = 'myPopover_' + row.id + '_' + $index
  if (this.$refs[refsName]) {
    this.$refs[refsName].hide()
  }
}, 3000, {
  leading: true,
  trailing: false
}),

防抖VS节流

特性	防抖	节流
执行时机	事件停止触发后执行	固定时间间隔执行
重置计时	每次触发都会重置计时	不会重置计时
适用场景	搜索框输入、rasize事件	滚动加载、按钮防重复点击、拖拽
极端情况	高频触发可能导致用不执行	高频触发会均匀执行
概括	多次触发—>最后一次有效	多次触发—>固定周期只执行一次