我觉得这是我在 jQuery 中听说过的“延迟”或“ promise ”解决的问题,但是搜索相关文章并不能完全显示我正在寻找的内容。
我希望能够执行一个简单的 jquery 函数调用(例如 animate()
或 slideUp()
),然后在完成时调用另一个简单函数。当然,我知道 slideUp(400, function(){//onComplete... });
但如果您有大量的动画级联,那么很快就会变得非常棘手。
查看以下 jsfiddle: http://jsfiddle.net/ue3daeab/
当您单击第一个按钮时,您会看到我想要实现的视觉效果。然而,我用“级联 hell ”来完成它,相关代码是:
$("#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/
关于javascript - 避免 jQuery 中的巨大级联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28052350/