vue防抖指令方法

Posted 2023-04-24

参考技术A 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函数不可以带括号 会自动触发函数'

vue 自定义指令防抖

directives: 
    throttle: 
      bind: (el, value) => 
        var falg = null
        el.addEventListener('click', function (event) 
          if (falg) 
            event.stopImmediatePropagation()
           else 
            falg = setTimeout(() => 
              falg = null
            , 10000)
          
        , true)
      
    
  ,

<el-button type="primary"
                   icon="el-icon-check"
                   @click="submitForm"
                   v-throttle>确 定</el-button>