如何让jQuery等待递归函数完成？

Question

我试图逐个动画一系列元素，然后，当所有元素都完成动画时执行一些代码。

这是我到目前为止所拥有的：

// this function is called on mouseleave or a click
function hideItems(){
    var opts = {duration:100, direction:"down", easing:"easeOutExpo"};
    $("li").last().hide("drop", opts, function hidePrev(){
        $(this).prev("li").hide("drop", opts, hidePrev);
    });
    $("ul").css('display','none');// i need this to wait
}

我会遍历所有li元素并隐藏它们。在重复ul个元素之后，我需要li元素隐藏。

我已经尝试过这些方面没有成功的事情：

// this function is called on mouseleave or a click
function hideItems(){
    var opts = {duration:100, direction:"down", easing:"easeOutExpo"};
    $("li").last().hide("drop", opts, function hidePrev(){
        $(this).prev("li").hide("drop", opts, hidePrev);
    }).then(function(){
        $("ul").css('display','none');
    });// this fails with: 'Uncaught TypeError: undefined is not a function'
}

Answer 1

只需使用通过li伪类选择最后可见 :visible的递归函数：

var opts = {duration:100, direction:'down', easing:'easeOutExpo'};

function recursiveHide(){
    $('li:visible').last().hide('drop', opts).promise().then(function(){
        if ($('li:visible').length){
            recursiveHide();
        } else {
            $('ul').hide();
        }
    });
}
recursiveHide();

另请注意，您需要在动画jQuery-Object上调用.promise()才能访问其thenable界面。

查看 fiddle 。