点击后使用setTimeout：如何仅获取最后一次迭代结果

嗨，我明白你的困扰啦！现在的问题是每次点击加号按钮时，都会创建一个新的setTimeout定时器——连续点6次就会生成6个定时器，到时间后它们会挨个执行，所以你会看到6次弹窗。

要实现“用户停止操作2-3秒后仅发送一次请求”的效果，我们需要在每次新的点击时取消之前未执行的定时器，只保留最后一次的计时。具体做法如下：

1. 先声明一个变量来存储定时器的ID，这样我们能随时取消它
2. 每次点击加号时，先清除之前的定时器，再重新设置新的定时器
3. 如果减号操作也需要触发AJAX请求，同样套用这个逻辑

修改后的代码如下：

// 声明一个变量保存定时器ID，放在事件绑定外面
let quantityTimer = null;

$(".iteration").on("click", function() {
  var quantity = parseInt($(".cart-product .counter-label").text());
  var pricee = parseFloat($(".single-price").text());
  
  if( $(this).hasClass("plus") ) {
    if ( quantity != 9 ) {
      quantity++;
      $(this).parent().find(".counter-label").text(quantity);
      
      // 先清除之前未执行的定时器
      clearTimeout(quantityTimer);
      // 重新设置新的定时器
      quantityTimer = setTimeout(function(){
        // CALL AJAX HERE
        $(".price-value").text((quantity * pricee).toFixed(2));
        alert(quantity);
      },2000);
    }
  }
  if( $(this).hasClass("minus") ) {
    if ( quantity != 1 ) {
      quantity--;
      $(this).parent().find(".counter-label").text(quantity);
      
      // 如果减号操作也需要触发AJAX，同样添加清除和重新设置定时器的逻辑
      clearTimeout(quantityTimer);
      quantityTimer = setTimeout(function(){
        // CALL AJAX HERE
        $(".price-value").text((quantity * pricee).toFixed(2));
        alert(quantity);
      },2000);
    }
  }
});

关键逻辑解释： #

• 每次用户点击加减按钮（需要触发AJAX的操作），我们先调用clearTimeout(quantityTimer)取消之前还没执行的定时器
• 然后重新创建一个新的定时器，这样只有当用户停止点击超过2秒时，最后一次的定时器才会触发，从而只发送一次AJAX请求
• 另外我帮你把quantity和pricee转换成了数字类型，避免字符串相乘出现意外问题

这样调整后，不管用户连续点击多少次按钮，只有在他们停止操作2秒后，才会执行一次AJAX请求，获取最终的数量值～

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