js中的队列

浏览数：50 / 时间：2015年06月09日

如果有5个隐藏的div，要让它们依次显示，通常的做法是要一个一个嵌套在回调函数里面，这样导致代码看起来非常不直观。

$("#div1").slideDown(1000,function(){
   $("#div2").slideDown(1000,function(){

　　　　...

　　　　...

   });

});

这个情况下，就可以使用队列，此时需要借助一个辅助对象，假设是$("#queueHelper")：

        var divs = $("div");
        divs.hide();
        for (var i = 0; i < divs.length; i++) {
            $("#queueHelper").queue(function () {
                divs.eq(i).slideDown(5000);
            });
        }
        for (var i = 0; i < divs.length; i++) {
            $("#queueHelper").dequeue();
        }

它思路就是找到一个辅助对象，向它一次性插入需要执行的动作，然后再一次性取出来。

在插入队列的时候，只是把方法保存进去。而等到出列的时候，才开始真正执行，并且是等待前一个方法执行完，才会执行后一个方法。

 

辅助对象的目的就是为了把所有函数都集中到同一个队列上，甚至可以直接用$("#div1")作为辅助对象。

如果没有把所有函数集中在同一个队列，而是分5个队列的话，那5个队列就会同时开始执行，看到的效果就是同时执行。

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 使用 log 方法 la for js class style 代码 使用 log 方法 la for js

相关文章

随机文章

您可能还喜欢

您可能还喜欢