How to stop clearQueue() from clearing in

I have a button, upon clicking on which a div is shown in 500ms and then after 500ms class shake is added onto that div. This shake classe is then removed after 2 seconds with delay . What I want is if user keep pressing on button then all callbacks become canceled except the last one.

Problematic code if click is pressed many time:

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
     
      $(".content").delay(time).queue(function() {
        console.log("shake");
        $(".content").removeClass("shake");
        $(".content").dequeue();
      });
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

---

Provide a name for the .delay() and .queue() calls. Check if .content .queue(queueName) has a .length before setting .delay(time, queueName) . Chain .dequeue(queueName) to .queue(queueName) call instead of calling .dequeue() within .queue() function. Note that .delay() also adds a function to element .queue() array

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      $(".content").clearQueue();
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
      if (!$(".content").queue("shake").length)
      $(".content").delay(time, "shake").queue("shake", function() {
        console.log("shake");
        $(".content").removeClass("shake");
      }).dequeue("shake");
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

---

Note: this solution uses a different method than clearQueue() .

As mentioned in the comments, there might be better options for achieving the effect you want. It sounds like you're trying to keep the shake class enabled for X seconds after the last button press.

We can accomplish this with setTimeout() , which executes a function after a specified amount of time. In this cause, we'll have our setTimeout() callback function remove the .shake class after time seconds.

To keep the .shake class enabled when the button is clicked we only need to 'reset' the setTimeout function. We can do this by clearing the timeout, using clearTimeout , then recreating it. This is accomplished by assigning the setTimeout function to a variable, which we pass to clearTimeout to clear it, then recreate the timeout.

The effect will be that the function to remove the .shake class will run time seconds AFTER the last time the button is clicked.

var remover;

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      if (remover) {
          clearTimeout(remover);
      }
      
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
 
      remover = window.setTimeout(function(){
        console.log("removing shake");
        $(".content").removeClass("shake");
      }, time)
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

链接地址: http://www.djcxy.com/p/39620.html

上一篇: 小桌子上没有索引？

下一篇: 如何阻止clearQueue（）清除