Vue2 实现 1.5s 十连击监听（连续点击若干次），封装通用可复用点击检测工具，不用 data！Vue 封装通用连击监听方法，支持自定义时长与点击次数

你挚爱的强哥2026-07-11 17:46

高复用：支持自定义时长、点击次数，回调分离业务逻辑，一套逻辑多处使用。
无 data 污染：计时计数存于函数自身属性，多按钮状态互不干扰。
容错性好：参数自带默认值，回调判空避免报错，回调回传配置信息。
防内存泄漏：组件销毁清除定时器，杜绝残留计时器报错。
易维护分层：入口方法与底层检测逻辑分离，改规则只需传参。
轻量无侵入：原生 Vue 实现，无第三方依赖，无多余响应式开销。相比硬编码版本，参数可动态配置，代码解耦易拓展。

sg.js方法体

javascript 复制代码

    // 连续点击方法-------------------------------------
    continueClick({ delay = 1500, clickTimes = 10, cb } = {}) {
        // 状态挂载函数自身，不占用data
        if (!$g.continueClick._data) {
            $g.continueClick._data = {
                count: 0,
                start: null,
                timer: null,
            };
        }
        const d = $g.continueClick._data;
        const now = Date.now();

        // 超出时间窗口，重置计数
        if (d.start && now - d.start > delay) {
            d.count = 0;
            d.start = null;
        }

        // 首次点击记录起始时间
        if (!d.start) d.start = now;
        d.count++;

        // 刷新倒计时
        clearTimeout(d.timer);
        d.timer = setTimeout(() => {
            d.count = 0;
            d.start = null;
        }, delay);

        // 达到指定点击次数触发逻辑
        if (d.count >= clickTimes) {
            // 触发后清空状态
            d.count = 0;
            d.start = null;
            clearTimeout(d.timer);

            cb && cb({ delay, clickTimes });
        }
    },

demo

html 复制代码

<template>
  <div>
    <el-button type="primary" @click="click">连续点击10次</el-button>
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {
    click() {
      this.$g.continueClick( {
        cb: (d) => {
          this.$message(`连续点击10次`);
        },
      });
    },
  },
};
</script>