vue中实现节流指令

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

utils.js文件

export function debounce(func , wait , immediate = true){
  // 定义一个timeout计时器
  let timeout
  return function (){
    // 如果每次进入函数的时候timeout有值，说明等待时间还没有过，不执行函数，清空timeout
    // 如果没有timeout，则说明过了等待期，可以执行函数
    if(timeout) clearTimeout(timeout)
    // 默认立即执行方法，延后执行的话，会让人感觉有卡顿
    if(immediate){
      // 定义现在是否能执行
      let now = !timeout
      if(now) func.apply(this, arguments)
      // 不论timeout有没有值，都重新给timeout新添加一个定时器
      // 等待wait时间后，将timeout设为null，代表可以继续执行次function
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
    }else{
      // 如果不是立即执行此函数，则在等待wait时间后执行方法
      timeout = setTimeout(()=>{
        func.apply(this, arguments)
      }, wait)
    }
  }
}

direction.js文件

import Vue from 'vue'
import {debounce} from './utils'
// 定义一个名为debounce的指令
Vue.directive('debounce', {
  // 绑定的值为el，和binding
  // binding的值为指令绑定的值,binding中有哪些值，可以去vue官网中查看自定义指令
  bind(el, binding){
    let execFunc
    // 在函数传参与不传参调用的时候，打印出来的binding.value是不同的
    // 打印binding.value可以帮助理解为什么有传参和不传参的区别
    console.log(binding.value)
    if(binding.value instanceof Array){
      // 函数传参
      const [func , time = 500] = binding.value
      execFunc = debounce(func, time)
    }else{
      // 函数不传参
      console.log('函数不传参')
      execFunc = debounce(binding.value, 500)
    }
    el.addEventListener('click', execFunc)
  }
})

函数不传参打印为：

函数传参：

在vue中使用：

传参使用方式：

<el-button  v-debounce="() => batchDelete('delete')">{{ $t('common.delete') }}</el-button>

如果不这么写的话，会返回函数执行完之后的返回值。

不传参使用方式：

<el-button class="lb-btn lb-btn-primary" icon="el-icon-delete" v-debounce="batchDelete">
            {{ $t('common.delete') }}
          </el-button>

以上是 vue中实现节流指令 的全部内容， 来源链接： utcz.com/z/379761.html

回到顶部