JavaScript 中点赞按钮怎么用防抖防止接口被频繁刷量-js教程-PHP中文网

点赞按钮防抖的核心是通过setTimeout清除定时器实现点击节流，确保300ms内仅最后一次点击触发请求，并需后端校验token、限频及日志监控配合防护。

javascript 中点赞按钮怎么用防抖防止接口被频繁刷量

点赞按钮防抖的核心是：在用户快速连续点击时，只让第一次点击触发接口，后续点击被“忽略”或“延迟拦截”，避免重复提交和刷量风险。关键不在前端炫技，而在控制请求节奏 + 后端配合验证。

防抖逻辑要写在点击事件里

不是给按钮加个“禁用”就完事，得真正阻断多余请求。用 setTimeout + 清除定时器 是最稳妥的实现方式：

每次点击都先清除上一次未执行的定时器
再设置一个新的延迟（比如 300ms），等用户停手后再发请求
如果 300ms 内又点了一次，前一个就被取消，只保留最后一次“停顿后的触发”

代码示例（原生 JS）

假设按钮 id 是 like-btn，点赞接口是 /api/like：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

let likeTimer = null;
document.getElementById('like-btn').addEventListener('click', function() {
  clearTimeout(likeTimer);
  likeTimer = setTimeout(() => {
    fetch('/api/like', { method: 'POST' })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          // 更新 UI，比如点赞数 +1、按钮变红
        }
      });
  }, 300);
});