vue中如何使用防抖函数

1.软文推荐

2.软文推荐

3.软文推荐

目录： 1、43.Vue中使用Lodash 节流（throttle）和防抖（debounce）函数 2、在vue中使用防抖 3、vue防抖指令方法 43.Vue中使用Lodash 节流（throttle）和防抖（debounce）函数

1、节流（throttle）: 创建一个节流函数，在等待时间内最多执行 一次的函数

2、防抖（debounce）：创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟多少时间后调用方法，如果不停执行函数，执行时间被覆盖

lodash中文文档

在vue中使用防抖

防抖是 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

常规写法如下

由上面改写过来变成：

vue防抖指令方法

1.创建 common.js 文件 

/**

 * @desc 函数防抖

 * @param func 函数

 * @param wait 延迟执行毫秒数

 * @param immediate true 表立即执行，false 表非立即执行

 */

export function debounce(func, wait, immediate = true) {

  let timeout

  return function () {

    if (timeout) clearTimeout(timeout)

    if (immediate) {

      var callNow = !timeout

      timeout = setTimeout(() = {

        timeout = null

      }, wait)

      if (callNow) func.apply(this, arguments)

    } else {

      timeout = setTimeout(function () {

        func.apply(context, args)

      }, wait)

    }

  }

}

2.创建 directives.js文件

import Vue from 'vue'

import { debounce } from '@/plugins/common'

//防抖自定义指令

Vue.directive('debounce',{

    bind(el,binding){

        let executeFunction;

        if(binding.value instanceof Array){//传参

            executeFunction = debounce(func,time)

        }else{//不传参

            executeFunction = debounce(binding.value,1000)

        }

        el.addEventListener('click',executeFunction);

    }

})

3.main.js 引入 import '@/directives'

4. 使用 v-debounce='click函数不可以带括号 会自动触发函数'