vue项目之自定义指令防抖

vue项目之自定义指令防抖

utils.js中封装防抖函数

/**
 * @desc  防抖
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(method, wait, immediate) {
  let timeout
  return function (...args) {
    let context = this
    if (timeout) {
      clearTimeout(timeout)
    }
    // 立即执行需要两个条件，一是immediate为true，二是timeout未被赋值或被置为null
    if (immediate) {
      // 如果定时器不存在，则立即执行，并设置一个定时器，wait毫秒后将定时器置为null
      // 这样确保立即执行后wait毫秒内不会被再次触发
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        method.apply(context, args)
      }
    } else {
      // 如果immediate为false，则函数wait毫秒后执行
      timeout = setTimeout(() => {
        // args是一个类数组对象，所以使用fn.apply
        // 也可写作method.call(context, ...args)
        method.apply(context, args)
      }, wait)
    }
  }
}

directiv.js 自定义指令

import Vue from 'vue'
import { debounce } from '@/utils'

Vue.directive('debounce', {
  inserted(el, binding) {
    console.log(el, binding);
    if (!binding.value.handler || typeof binding.value.handler !== 'function') {
      return
    }
    const handler = binding.value.handler
    const wait = binding.value.await || 1000
    const immediate = !!binding.value.immediate
    const event = binding.value.event || 'input'
    el.addEventListener(event, debounce(handler, wait, immediate))
  }
})

页面使用自定义指令

<!--  -->
<template>
  <div class="content-box">
    <div class="container">
      <input
        type="text"
        v-model="searchText"
        placeholder="请输入搜索名称"
        ref="searchIpt"
        v-debounce="{ handler: handleSearch, event: 'input', wait: 1000 }"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    async handleSearch() {
      console.log(this.searchText)
    }
  }
}
</script>

<style  lang="scss" scoped>
</style>

感谢龙哥的指导和支持

效果如下

快速输入内容后查看效果