单击停止后执行我的setTimeout函数 [英] execute my setTimeout function after clicking stops

问题描述

我有一个click事件，单击div后，它将在另外两个div中添加和删除类.

I have a click event where once you click the div, it is adding and removing classes from two other divs.

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

Then I have a setTimeout function where it is reversing the classes it added and removed from the two other divs.

问题是，我需要setTimeout在单击停止后执行.

The thing is, I need the setTimeout to execute after the clicking stops.

是否可以在setTimeout执行之前检查click事件是否结束?

Is there a way to check for the click event to end before the setTimeout can execute?

一切正常，但我需要它在单击停止之前不要执行setTimeout.

Everything works but I need it to not do setTimeout until the clicking stops.

这是我的代码:

$(".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">

推荐答案

您正在为每次点击创建新的超时.如果您希望仅在点击停止后才发生这种情况，则可以尝试以下操作.

You're creating a new timeout for each click. If you want it to happen only after the click has stopped, you can try the following.

$(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秒钟之内即可.

This will destroy the timeout every time the user clicks the element, provided it's within 2 seconds, the time of your timeout.

这篇关于单击停止后执行我的setTimeout函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！