Throttle Directive

源码

main.ts

app
  .mount('#app')
  .directive('throttle', {
    mounted(el, binding) {
      const [callback, time = 300, arg = [], immediate = false]: [
        Function,
        number,
        any[],
        boolean,
      ] = binding.value

      let bol = true
      // 只执行一次
      let only = true
      el.addEventListener('click', () => {
        // 是否立即执行
        if (immediate && only) {
          only = false
          callback(...arg)
        }

        if (bol) {
          bol = false
          setTimeout(() => {
            bol = true
            callback(...arg)
          }, time)
        }
      })
    },
  })

第一个参数为 callback - 回调事件(必传)，第二个参数为 time - 间隔时间，默认 300，第三个参数为 arg - 参数，第四个参数为 immediate - 开始时还是结束时 默认 false 结束时, true 开始时

<template>
  <h4 style="margin-bottom: 0">节流</h4>

  <div class="grid grid-c-3">
    <div>
      <div class="tipBox">
        基础节流（指令）
        <div style="font-size: 13px; color: var(--vp-code-color)">
          v-throttle="[msg]"
        </div>
      </div>
      <el-button type="primary" v-throttle="[msg]">点击触发</el-button>
    </div>

    <div>
      <div class="tipBox">
        立即执行（指令）
        <div style="font-size: 13px; color: var(--vp-code-color)">
          v-throttle="[msg, 2000, [], true]"
        </div>
      </div>
      <el-button type="primary" v-throttle="[msg, 2000, [], true]"
        >点击触发</el-button
      >
    </div>

    <div>
      <div class="tipBox">
        带参（指令）
        <div style="font-size: 13px; color: var(--vp-code-color)">
          v-throttle="[msg, 2000, ['风和自由']]"
        </div>
      </div>
      <el-button type="primary" v-throttle="[msg, 2000, ['风和自由']]"
        >点击触发</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Directive, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;

const msg = (str = '触发', type = 'success') => {
  proxy.$message[type](str);
};
const vThrottle: Directive = {
  mounted(el, binding) {
    const [callback, time = 300, arg = [], immediate = false]: [
      Function,
      number,
      any[],
      boolean
    ] = binding.value;

    let bol = true;
    // 只执行一次
    let only = true;
    el.addEventListener('click', () => {
      // 是否立即执行
      if (immediate && only) {
        only = false;
        callback(...arg);
      }

      if (bol) {
        bol = false;
        setTimeout(() => {
          bol = true;
          callback(...arg);
        }, time);
      }
    });
  },
};
</script>

隐藏源代码