vanilla JavaScript实现连续点击后延迟1秒仅执行一次函数

你描述的连续点击只触发一次最终逻辑的需求，对应前端通用的**防抖（debounce）**实现模式，用原生JavaScript即可完成，不需要任何第三方依赖。
核心实现逻辑如下：

• 在按钮事件绑定的外层作用域声明一个变量存储计时器ID，注意变量不能放在点击事件回调内部声明，否则每次点击都会生成独立计时器，无法实现重置效果。
• 给增加、减少两个数量按钮绑定点击处理逻辑：每次点击触发时，先调用clearTimeout清除上一次生成的未执行计时器，再重新调用setTimeout生成新的1秒计时器，把需要最终执行的目标函数放到计时器回调中。
• 逻辑生效后，只要用户连续点击的间隔小于1秒，之前的等待计时器就会被清空重置，目标函数不会执行；只有最后一次点击后满1秒没有新的点击触发，目标函数才会执行一次。

完整可运行代码示例 #

<!-- 页面按钮结构示例 -->
<button class="qty-btn" data-type="decrease">-</button>
<span class="qty-num">1</span>
<button class="qty-btn" data-type="increase">+</button>

<script>
// 存储计时器ID的变量，放在事件外层作用域
let qtyTimer = null
// 需要最终执行的目标函数，示例为打印当前数量，可替换为接口请求等业务逻辑
function updateQtyFinal() {
  const currentNum = document.querySelector('.qty-num').textContent
  console.log('执行最终数量更新，当前值为：', currentNum)
}

// 给所有数量按钮绑定点击事件
document.querySelectorAll('.qty-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 数量增减的UI反馈点击即时生效，不做延迟，保证操作流畅感
    const numEl = document.querySelector('.qty-num')
    let current = Number(numEl.textContent)
    if (btn.dataset.type === 'increase') {
      current += 1
    } else {
      current = Math.max(1, current - 1) // 限制最小值为1，避免出现负数
    }
    numEl.textContent = current

    // 防抖核心：清除旧计时器，启动新的1秒倒计时
    if (qtyTimer) clearTimeout(qtyTimer)
    qtyTimer = setTimeout(() => {
      updateQtyFinal()
      qtyTimer = null
    }, 1000)
  })
})
</script>

注意：不要把UI更新逻辑放到防抖延迟里执行，否则用户点击后数字不会立刻变化，会有明显的操作卡顿感。1秒延迟只需要作用于不需要高频触发的逻辑，比如向后端同步购物车数量、提交统计事件这类操作。

通用封装优化 #

如果页面里多处需要用到同类逻辑，可以把防抖能力抽成通用工具函数，避免重复写计时器管理逻辑：

// 通用防抖工具函数
function debounce(func, delay = 1000) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
      timer = null
    }, delay)
  }
}

// 使用示例：用debounce包裹目标函数即可，不需要手动管理计时器
const debouncedUpdate = debounce(updateQtyFinal, 1000)
// 点击事件中直接调用debouncedUpdate()即可触发防抖逻辑

内容的提问来源于stack exchange，提问作者Pedro Rabbi