单击停止后执行我的setTimeout函数

Question

我有一个点击事件，一旦你点击div，它是添加和删除其他两个div的类。

然后我有一个setTimeout函数，它正在反转它添加的类和从其他两个div中删除的类。

问题是，我需要在点击停止后执行setTimeout。

有没有办法在setTimeout执行之前检查click事件是否结束？

一切正常但我需要它不要在点击停止之前执行setTimeout。

这是我的代码：

$(".plus").click(function() {
    $(".reg-state").removeClass("active");
    $(".reg-state").addClass("hidden");
    $(".hot-state").removeClass("hidden");  
    $(".hot-state").addClass("active");

    setTImeout(function() {
        $(".reg-state").removeClass("hidden");
        $(".reg-state").addClass("active");
        $(".hot-state").removeClass("active");           
        $(".hot-state").addClass("hidden");
    }, 2000);
});

<div class="plus"></div>
<img class="reg-state active" src="images/SVG/circle.svg">
<img class="hot-state hidden" src="images/SVG/circlered.svg">

Answer 1

您为每次点击创建了一个新的超时。如果您希望仅在点击停止后才会发生，您可以尝试以下操作。

$(function() {
  var throttle = null;
  
  $(".plus").click(function() {
    if (throttle) clearTimeout(throttle);
    
    $(".reg-state").removeClass("active");
    $(".reg-state").addClass("hidden");
    $(".hot-state").removeClass("hidden");
    $(".hot-state").addClass("active");

    throttle = setTimeout(function() {
      throttle = null;
      
      $(".reg-state").removeClass("hidden");
      $(".reg-state").addClass("active");
      $(".hot-state").removeClass("active");
      $(".hot-state").addClass("hidden");
    }, 2000);
  });
});

这将在每次用户单击元素时销毁超时，前提是它在2秒内即超时时间。