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秒内即超时。

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

1 个答案: