jQuery queue()的例子

下面是针对“jQuery queue()的例子”的详细攻略。

什么是jQuery queue()方法？

在jQuery中，queue()方法用于将一组函数按照顺序添加到当前匹配元素的队列中，并在之后按照队列中函数的顺序依次执行它们。该方法非常适合用于实现动画效果或事件队列。

queue()方法的基本用法

语法

$(selector).queue([queueName],function(next));

参数说明

queueName：可选参数，表示队列的名称，如果不指定，则默认为"fx"。同时，如果我们想要同时执行多个队列，可以指定不同的队列名称。队列名称必须是字符串类型。
function：必选参数，表示需要添加到队列中的函数，该函数必须接受next参数，以便在队列中的下一个函数执行完成后，执行该函数。

下面是一个简单的示例，展示如何使用queue()方法：

//队列中添加2个函数，用于依次实现动画效果
$("button").click(function(){
  $("div").slideDown(3000);
  $("div").queue(function(){
    $(this).css("background-color", "green");
    $(this).dequeue();
  });
  $("div").slideUp(2000);
});

实战示例1：击鼓传花小游戏

现在我们来使用jQuery的queue()方法，编写一个击鼓传花的小游戏。

游戏规则

点击击鼓后，音乐开始播放，同时小花传给随机的下一个人
小花传递给下一个人时，需要使用动画效果
当音乐结束时，小花传递到谁手里，谁就会被淘汰出局

游戏实现

首先，我们需要准备好游戏的HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>击鼓传花小游戏</title>
<style>
.rhythm{
    background:url(images/boombox.jpg) no-repeat 0px 0px;
    width:150px;
    height:229px;
    cursor:pointer;
}
.player{
    width:80px;
    height:80px;
    position:absolute;
    top:70px;
    left:90px;
    display:none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/howler/2.1.3/howler.min.js"></script>
<script>
var names = ["小王","小张","小李","小赵","小杨","小刘"];
var current = 0;
$(function(){

    //准备音效
    var sound = new Howl({
      src: ['sounds/Race_Car-Idle_Lo.mp3']
    });

    //准备队列
    $("#btnStart").click(function(){
        $("#btnStart").hide();
        $("#txtWait").show();
        $("h1").text("击鼓传花游戏开始！");
        $("#txtWait").text("音乐准备中，请稍候...");
        sound.once('load', function(){
            $("h1").text("保持节奏，小花赶快传递！");
            $("#txtWait").hide();
            $(".player").show();
            $("#player1").addClass("rotate");
            sound.play();
            $("h2").text(names[current]+"手中有花！");
            $("#player1").queue("wait", function(next){
                $("#player1").removeClass("rotate");
                current++;
                if(current>=names.length){current=0;}
                $("h2").text(names[current]+"手中有花！");
                $("#player"+(this.id.replace("player",""))).effect("transfer", { to: "#player"+((this.id.replace("player","")%5)+1), className: "transfer" }, 1000, function(){
                    next();
                    $(this).addClass("rotate");
                });
                $(this).dequeue();
            });
            $("#player1").queue("wait", function(next){
                sound.once('end', function(){
                    alert(names[current]+"被淘汰了！");
                    location.reload(true);
                });
                $(this).dequeue();
            });
            $("#player1").dequeue("wait");
        });
    });

});
</script>
</head>
<body>

<div class="rhythm" id="btnStart"></div>
<div class="player" id="player1"></div>
<div class="player" id="player2"></div>
<div class="player" id="player3"></div>
<div class="player" id="player4"></div>
<div class="player" id="player5"></div>
<h1>击鼓传花小游戏</h1>
<h2>谁手中有花？</h2>
<div id="txtWait">游戏马上开始！请等待...</div>
</body>
</html>

在代码中，我们需要为游戏中的每个人物创建一个class为player的div，同时定义每个人物的绝对位置。因为每次小花的传递是需要动画效果的，所以我们需要使用UI的effect方法，用于实现transfer效果。当游戏结束时，我们需要自动重新加载网页，以便重新开始游戏。

在JavaScript代码中，我们首先为游戏中的每个人物添加一个队列(wait)，用于等待自己传递小花。在音效准备好后，我们开始播放音乐和动画效果，并将当前小花的持有者初始化为第一个人物（current=0）。在小花传递时，我们通过使用UI的effect方法，将小花从当前持有者传递给随机的下一个人。

实战示例2：实现一个队列定时器

现在我们来使用jQuery的queue()方法，编写一个队列定时器。

程序实现

我们需要准备一个点击按钮，当点击按钮时，我们需要启动一个队列，并每隔1秒在队列中追加一个函数，直到队列中已经有10个函数位置。然后我们执行队列中的函数，展示函数执行的顺序情况。

我们需要先准备一个空的div，用于展示队列的执行情况。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>队列定时器</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){

    $("#start").click(function(){
        var queue = $({});
        var result = "";
        for(var i=0;i<10;i++){
            queue.queue("test",function(next){
                result = result + i + "-";
                $("#out").text(result);
                next();
            });
            setTimeout(function(){
                queue.dequeue("test");
            },i*1000);
        }
    });

});
</script>
</head>
<body>

<button id="start">启动定时器</button>
<div id="out"></div>

</body>
</html>

在JavaScript代码中，我们需要通过$({})的方式来创建一个空的jQuery对象（queue），然后通过使用queue()方法，为该对象添加名为test的队列。在for循环中，我们需要使用queue.queue()方法，将指定的函数添加到队列的末尾。

为了实现每隔1秒添加一个函数的效果，我们需要使用setTimeout()方法，指定不同的延时执行时间。同时，在每次执行函数后，我们还需要使用queue.dequeue("test")来移除队列中的函数。当队列中函数的数量等于10时，我们即刻执行队列中的所有函数，并展示函数执行的顺序情况。

以上就是实现队列定时器的完整攻略示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery queue()的例子 - Python技术站