jQuery clearQueue() method

As the name implies, the clearQueue() method is used to remove all items in the queue that have not yet been executed. When a function starts its execution, it runs until completion.

It is different from the stop() method, as the stop() method only works with animation, but the clearQueue() method can be used to remove any queued functions.

Syntax

The commonly used syntax of using the clearQueue() method is given below -

The queueName mentioned in the above syntax is the optional parameter of the clearQueue() method, which specifies the name of the queue. If it is omitted, the default value "fx" is assumed, that is, the standard effects queue.

So, if the clearQueue() method is used without any arguments, the method will remove the remaining functions from fx.

Now, let's see an illustration to understand the concept of the clearQueue() method.

Example

It is a simple example of using the clearQueue() method. In this example, we are using the clearQueue() method together with the queue() method. Here, there is a div element and two buttons. The div element will start animating by clicking the Start Animation button, and the length of the queue will be displayed. We are looping the queue, so the length will change accordingly.

On clicking the Stop Animation button, the animation will stop, and length of the queue will be equal to zero. This is because the clearQueue() method will remove all non-executed items in the queue.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
begin();
show();
    function begin(){
$("div").animate({height: 100}, "slow").text("Welcome to the javaTpoint.com");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 150 }, "slow");
$("div").animate({height: 75 }, "slow");
$("div").animate({width: 350 }, "slow", begin);
    }

    function show(){
      var i = $("div").queue();
      $("span").text(i.length);   
      setTimeout(show);
    }
  });
  $("#btn2").click(function(){
$("div").clearQueue();
  });
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}

</style>
</head>
<body>
<h3> It is an example of using the clearQueue() method. </h3>  
<button id = "btn1"> Start Animation </button>
<button id = "btn2"> Stop Animation </button>

<p> queue length: <span> </span> </p>

<div> </div>

</body>
</html>

Test it Now

Output

After the execution of the above code, we will see the following output -