防止暴力点击(节流)

节流(throttle)

在n秒内点击多次,只有一次生效。


<template>
  <div>
    <button @click="throttle">按钮</button>
  </div>
</template>

<script>
//定义
let timer, lastTime;
let now = +new Date();
export default {
  methods: {
    throttle: () => {
      if (lastTime && now - lastTime < 200) {
        clearTimeout(timer);
        console.log("....");
        timer = setTimeout(() => {
          console.log("点击...");
          lastTime = +new Date();
        }, 2000);
      } else {
        lastTime = now;
        timer = setTimeout(() => {
          console.log("点击...");
          lastTime = +new Date();
        }, 200);
      }
    }
  }
};
</script>

效果演示:

 

图片加载失败!

补充

当然,也可以对其进行封装,以便复用。


/*
 * 函数节流
 */
export const Throttle = (fn, t) => {
    let last;
    let timer;
    let interval = t || 500;
    return function () {
        let args = arguments;
        let now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(this, args);
            }, interval);
        } else {
            last = now;
            fn.apply(this, args);
        }
    }
};

 

### 防止快速多次点击节流与防抖的适用场景及区别 在前端开发中,防止用户快速多次点击是一种常见的需求。这种情况下,可以选择使用 **防抖(Debounce)** 或者 **节流(Throttle)** 技术来解决问题。 #### 1. 防抖(Debounce) 防抖的核心思想是在指定的时间范围内,只有当事件不再触发时才会执行最后一次的操作[^2]。对于按钮点击这类场景,防抖非常适合用于以下情况: - 当用户连续点击按钮时,只需要响应最后一次点击操作。 - 场景实例包括登录按钮、发送验证码按钮等。这些场景通常希望避免因用户的误操作而引发重复提交或请求[^1]。 以下是基于 TypeScript 的简单防抖函数实现: ```typescript export const debounce = (fn: Function, wait: number): Function => { let timer: NodeJS.Timeout | null = null; return function (...args: any[]) { if (timer !== null) clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), wait); }; }; ``` 通过该方法,可以有效减少不必要的网络请求或其他昂贵操作的发生次数。 --- #### 2. 节流(Throttle) 节流的主要特点是无论事件触发多么频繁,在设定的时间间隔内只会执行一次处理逻辑[^5]。适用于需要定期响应某些高频事件的情形,例如滚动监听或者鼠标移动等。 针对按钮点击问题,如果采用节流策略,则意味着即使用户疯狂点击按钮,也仅会在固定周期内允许单次有效的交互行为发生。这种方式特别适合那些对性能敏感的任务,比如控制动画帧率或是分页加载数据等功能[^4]。 下面展示了一个基础版的 JavaScript 实现代码片段: ```javascript var throttle = function(func, delay){ var lastCall = 0; return function(...args){ var now = new Date().getTime(); if(now - lastCall >= delay){ lastCall = now; func.apply(this, args); } }; }; ``` --- #### 3. 区别对比分析 | 特性 | 防抖 | 节流 | |--------------|-------------------------------|--------------------------------| | 响应时机 | 只有在停止触发后才生效 | 定期按一定频率触发 | | 是否延迟 | 是 | 否 | | 应用范围 | 关注最终状态变化 | 控制高频率事件 | 具体到防止快速多次点击这一特定用途来说,两者各有优劣: - 如果目标是确保每次动作都得到及时反馈但又不想让服务器负载过重的话,那么应该优先考虑应用「节流」方案; - 若更倾向于忽略中间过程干扰并专注于最后的结果呈现,则推荐选用「防抖」机制[^3]。 综上所述,实际项目中的选择取决于具体的业务需求以及用户体验设计上的考量因素。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值