jQuery ajax请求内部淡入淡出回调执行多次

Question

这就是我的HTML看起来的样子:

    <ul id="list">
            <li><a href="#one">One</a></li>
            <li><a href="#two">Two</a></li>
            <li><a href="#three">Three</a></li>
    <ul>

这是我的jQuery:

    $("#list li").fadeOut(600, function(){
        $.ajax({
            type: "POST",
            url: "includes/functions/ajax.php",
            data: { id: id },
            dataType: "json",
            })
        .done(function(data){
            otherFunction(data);
        });         
    });

所以,我试图隐藏列表元素,然后运行ajax请求.但问题是由于某种原因,ajax请求正在执行三次.如果我删除了淡入淡出函数,请求就会正常执行(只有一次),所以可能正在运行的次数与我列表中的项目一样多,我觉得很奇怪.那可能吗？你能帮我找出解决方案吗？我真的需要只在fadeOut函数完成时才执行ajax请求.

我希望自己清楚明白,如果我搞砸了英语,我会道歉.

谢谢!

Answer 1

complete为集合中的每个元素调用标准动画回调.

如果你使用,.promise()你可以排队一个回调,它将等到给定集合上的所有动画完成:

$('#myList li').fadeOut('slow', function() {
    console.log('per element');
}).promise().done(function() {
    console.log('all elements');
});

http://jsfiddle.net/alnitak/cLv8X/