v-throttle

2023年11月03日

柏拉文

越努力，越幸运

一、认识

---

v-throttle 是节流指令, 可以用于如下场景:

1. 表单防止重复点击

二、实现

---

思路:

1. 用时间戳来判断是否已到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差（Xms） ，如果是则执行，并更新上次执行的时间戳，如此循环。

2. event.stopImmediatePropagation: 阻止监听同一事件的其他事件监听器被调用。如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

import { App } from 'vue';

export default {
  install(app: App<Element>, _options: any) {
    app.directive('throttle', {
      created(el, binding) {
        let wait = binding.value || 3000;
        let previous = 0;

        el.addEventListener('click', (event: any) => {
          let now = +new Date();
          if (now - previous > wait) {
            previous = now;
          } else {
            event && event.stopImmediatePropagation();
          }
        });
      }
    });
  }
};

三、应用

---

<template>
  <div>
    <button v-throttle @click="handleClick">测试 v-throttle</button>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('test');
};
</script>