如何防止jQuery代码中嵌套过多的函数？
我不知道调用这个嵌套是否正确？但我知道将多个函数放在一起并不是一个好的代码。大多数jQuery方法都有回调函数，我们可以把回调放在里面。但是，当我们在另一个回调中进行回调并继续这样做，并且越来越深入时，代码的可读性和可调试性似乎变得越来越差。
例如，如果我想一个接一个地做一些动画，我必须在它的回调函数中调用我想要的每一个动画。在回调函数中，它会越来越深。看看这个例子(fiddle)：
$('#t').animate({height: 400}, 500, function(){
$(this).animate({height: 200}, 500, function(){
$(this).animate({width: 300}, 500, function(){
$(this).animate({height: 300}, 500, function(){
$(this).animate({'border-radius': '50px'}, 500, function(){
//and so on...
});
});
});
});
});为了做一个5步的动画，我必须做一个5级的调用堆栈。所以我的问题是你是如何避免这种情况的？我在Node.js函数中也遇到了同样的问题。
更新：我知道jQuery函数有chinning功能，但这并不能解决问题。因为你不能在链条之间做一些事情。你可以像$(selector').animate().animate()...一样写上面的代码，但是你不能这样做：
$('#t').animate({height: 400}, 500, function(){
console.log('step 1 done: like a boss');
$(this).animate({height: 200}, 500, function(){
console.log('step 2 done: like a boss');
$(this).animate({width: 300}, 500, function(){
console.log('step 3 done: like a boss');
$(this).animate({height: 300}, 500, function(){
console.log('step 4 done: like a boss');
$(this).animate({'border-radius': '50px'}, 500, function(){
//and so on...
});
});
});
});
});理想的解决方案应该是这样的代码：
$(selector).doQ(anim1, anim2, myfunc1, anim3, myfunc2)...但遗憾的是，jQuery没有这样的API (据我所知)。
回答 5
Stack Overflow用户
发布于 2011-09-19 05:51:45
阅读有关jQuery队列的信息。你的代码也可以写成这样：
$('#t')
.animate({height: 400}, 500)
.animate({height: 200}, 500)
.animate({width: 300}, 500)
.animate({height: 300}, 500)
.animate({'border-radius': '50px'}, 500);第一个动画立即运行，但其他动画被放在"fx“队列中，并在其他动画结束时依次执行。
Stack Overflow用户
发布于 2011-09-19 05:51:40
阅读JQuery的Deferred Object
它是一个可链接的实用程序对象，可以将多个回调注册到回调队列中，调用回调队列，并中继任何同步或异步函数的成功或失败状态。
如果你的回调仅仅是动画，那么只要链接它们并利用JQuery的fx队列即可。
Stack Overflow用户
发布于 2011-09-19 05:52:10
jQuery对象有一个默认队列。试试这个小提琴：http://jsfiddle.net/TbkjK/1/
https://stackoverflow.com/questions/7464682
复制相似问题