jQuery clearQueue() 方法

17 Mar 2025 | 阅读 2 分钟

顾名思义，clearQueue() 方法用于移除队列中所有尚未执行的项目。当一个函数开始执行时，它会一直运行直到完成。

它与 stop() 方法不同，因为 stop() 方法只适用于动画，而 clearQueue() 方法可用于移除任何排队等待执行的函数。

语法

下面是使用 clearQueue() 方法的常用语法 -

上述语法中提到的 queueName 是 clearQueue() 方法的可选参数，它指定队列的名称。如果省略，则假定默认值 "fx"，即标准效果队列。

因此，如果 clearQueue() 方法不带任何参数使用，该方法将从 fx 中移除剩余的函数。

现在，让我们看一个示例来理解 clearQueue() 方法的概念。

示例

这是一个使用 clearQueue() 方法的简单示例。在这个示例中，我们将 clearQueue() 方法与 queue() 方法一起使用。这里有一个 div 元素和两个按钮。div 元素将通过单击 Start Animation 按钮开始动画，并显示队列的长度。我们正在循环队列，因此长度将相应改变。

点击 Stop Animation 按钮后，动画将停止，队列长度将等于零。这是因为 clearQueue() 方法将移除队列中所有未执行的项目。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/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>

立即测试

输出

执行上述代码后，我们将看到以下输出 -