如何防止jQuery代碼過多的嵌套函數？

Question

我不知道調用這個嵌套是否正確？ 但是我知道在彼此之內擁有許多功能並不是一個好的代碼。 大多數jQuery方法都有回調函數，我們可以將回調函數放在那里。 但是當我們在另一個回調中進行回調並繼續進行並且越來越深入時，代碼似乎變得不那么可讀並且可能更少可調試。

例如，如果我想在彼此之后做一些動畫，我必須在它的回調函數中調用我想要的另一個動畫。 它將在回調函數中越來越深入。 看看這個例子（ 小提琴 ）：

$('#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（據我所知）。

Answer 1

*“理想的解決方案是這樣的代碼：

$（selector）.doQ（anim1，anim2，myfunc1，anim3，myfunc2）......“*

method: 這不是你想要的，但jQuery確實有queue() 方法：

$(selector).animate({height: 400}, 500)
           .animate({height: 200}, 500)
           .queue( myfunc1 )
           .animate({width: 300}, 500)
           .queue( myfunc2 );

method: 您只需要確保函數在使用dequeue() 方法完成后釋放隊列：

function myfunc1() {
    // your code
    $(this).dequeue();
}

或者你可以將你的函數包裝在一個匿名函數中，然后調用然后在那里出列：

$(selector).animate({height: 400}, 500)
           .animate({height: 200}, 500)
           .queue( function( nxt ) {
               myfunc1();
               $(this).dequeue();
            })
           .animate({width: 300}, 500)
           .queue( function( nxt ) {
               myfunc2();
               nxt(); // alternate way to dequeue
            });

Answer 2

閱讀jQuery隊列。 您的代碼也可以這樣寫：

$('#t')
    .animate({height: 400}, 500)
    .animate({height: 200}, 500)
    .animate({width: 300}, 500)
    .animate({height: 300}, 500)
    .animate({'border-radius': '50px'}, 500);

第一個動畫立即運行，但其他動畫放在“fx”隊列中，當其他動畫完成時依次執行。

Answer 3

閱讀JQuery的延遲對象

它是一個可鏈接的實用程序對象，可以將多個回調注冊到回調隊列，調用回調隊列，並中繼任何同步或異步函數的成功或失敗狀態。

如果你的回調只是動畫，那么只需鏈接它們並利用JQuery的fx隊列。

Answer 4

jQuery對象有一個默認隊列。 試試這個小提琴： http ： //jsfiddle.net/TbkjK/1/

Answer 5

一點點清潔方式：

$('#t')
    .animate({height: 400}, 500, animationDone)
    .animate({height: 200}, 500, animationDone)
    .animate({width : 200}, 500, animationDone)
    .animate({height: 300}, 500, animationDone)
    .animate({'border-radius': '50px'}, 500, animationDone);


var logCount = 0;
function animationDone(e) {
    logCount++;

    $("#t").html("Animation # " + logCount + " has completed!");
}

只需根據logCount編號做一些事情。 這里可以看到例子。

Answer 6

您可以做的是使用名稱定義函數，並在其他函數中引用它們，例如

  var clicka = function(){
    alert("I got clicked after t.")
  }
  var clickt = function(){
        alert("I got clicked!")
        $('#a').click(clicka)
  }
  $('#t').click(clickt);