在Vue中使用防抖函数

首先要明白函数防抖和节流都是做什么用的，具体请看面试题：彻底弄懂函数防抖和节流

1 初级使用

1、在utils下创建debounce.js，如下：

/** 第一步：写防抖函数
 * @desc 防抖函数
 * @param {需要防抖的函数} func
 * @param {延迟时间} wait
 * @param {是否立即执行} immediate
 */
export function debounce(func, wait, immediate) {
  let timeout
  
  return function(...args) {
    let context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

2、在所写的.vue页面中引入，如下：

import { debounce } from "@/utils/debounce"; // 第二步：引入防抖函数

3、在所需要的地方使用防抖函数
如下，当页面大小变化时会多次触发

window.onresize = function() {
    console.log("lllll");
    myChart.resize(); // 需要防抖节流
};

修改为下面这样，成功实现防抖功能（即将需要防抖的函数包含在所写的防抖函数中即可）：

2 使用lodash中的debounce函数

1、通过npm安装

npm i --save lodash

2、引入lodash

import lodash from 'lodash'

3、直接在项目页面中使用

参考官方文档：lodash.debounce的使用

若在需要的页面引入，如下：

import { debounce } from 'lodash'

使用如下：