避免在jQuery中出现巨大的级联

Avoid giant cascading in jQuery?

本文关键字：巨大 级联 jQuery      更新时间：2023-09-26

我觉得这是我在jQuery中听说过的"延期"或"承诺"来解决的问题，但是搜索相关文章并不能完全显示我正在寻找什么。

我希望能够做一个简单的jquery函数调用（如animate()或slideUp()），然后在完成后调用另一个简单的函数。我当然知道slideUp(400, function(){ //onComplete... });但是如果你有大量的动画，那很快就会变得非常毛茸茸的。

查看以下jsfiddle：http://jsfiddle.net/ue3daeab/

当你点击第一个按钮时，你会看到我想要实现的视觉效果。但是，我正在使用"级联地狱"来完成它，相关代码是：

$("#clickme").click(function(){
    //Cascade hell
    $("#my1").slideUp(400, function(){
        $("#my2").slideUp(400, function(){
            $("#my3").slideUp(400, function(){
                $("#my4").slideUp(400, function(){
                    $("#my5").slideUp(400, function(){
                        $("#my6").slideUp(400, function(){
                            $("#my7").slideUp(400, function(){
                                $("#my8").slideUp(400, function(){
                                    $("#my9").slideUp(400, function(){
                                        $("#my10").slideUp(400);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

当您单击按钮 2 时，所有div 都会立即折叠，这不是我想要的效果。我觉得我应该能够做这样的事情，但显然它不起作用。第二个按钮的相关代码是：

$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());

有什么建议吗？谢谢。

为什么不使用一个简单的 id 数组来折叠，然后一次折叠一个项目？

$("#clickme").click(function(){
    var toCollapse = ["#my1", "#my2", ...];
    (function collapse(){
        var id = toCollapse.shift();
        if (!id) return;
        $(id).slideUp(400, collapse);
    })();
});

我也用这个例子编辑了你的jsfiddle：http://jsfiddle.net/ue3daeab/2/

我会做这样的事情：未经测试

$.each($('.item', '#container'), function(index, value) { 
        $(this).delay(50*index).slideUp(400);
});

这样，一切都不会试图一下子发生。

相关文章：