.clearQueue()

Định nghĩa và sử dụng

  • .clearQueue(): Loại bỏ các thành phần đang đợi tới lượt (chưa được chạy).
  • .clearQueue() Khi được sử dụng mà không có một đối số, .clearQueue() sẽ loại bỏ các chức năng còn lại từ function. Bằng cách này, nó tương tự như sử dụng .stop(true). Tuy nhiên, trong khi phương thức .stop() chỉ được sử dụng với animate.
  • .clearQueue() cũng có thể được sử dụng để loại bỏ bất kỳ chức năng đã được thêm vào một hàng đợi jQuery chung với phương pháp .queue().

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.4

.clearQueue(Tên queue)

$('.test').clearQueue();

.clearQueue(Tên queue)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
}
div.newcolor {
    background: blue;
}
</style>
<script>
$(function(){
    $('#start').click(function() {
        var myDiv = $('div');
        myDiv.show('slow');
        myDiv.animate({
            left:'+=200'
        }, 5000);
        myDiv.queue(function() {
            var that = $(this);
            that.addClass('newcolor');
            that.dequeue();
        });
        myDiv.animate({
            left:'-=200'
        }, 1500 );
        myDiv.queue(function() {
            var that = $(this);
            that.removeClass('newcolor');
            that.dequeue();
        });
        myDiv.slideUp();
    });
    $('#stop').click(function() {
        var myDiv = $('div');
        myDiv.clearQueue();
        myDiv.stop();
    });
});
</script>
</head>

<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
</body>
</html>

Hiển thị trình duyệt:

Khi click vào button Stop, ta đã kích hoạt .clearQueue(), loại bỏ tất cả các hành động tiếp theo.

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    height: 50px;
    width: 50px;
}
</style>
<script>
$(function(){
    $('#start').click(function(){
        $('div').animate({height:130},1000);
        $('div').animate({width:300},1000);
        $('div').animate({height:50},1000);
        $('div').animate({width:50},1000);
    });
    $('#stop').click(function(){
        $('div').clearQueue();
    });
});
</script>
</head>

<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
</body>
</html>

Hiển thị trình duyệt:

Khi click vào button Stop, ta đã kích hoạt .clearQueue(), loại bỏ tất cả các hành động tiếp theo.