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/

Answer 2

问题是你的选择器引用了3个元素，所以回调执行了三次（每个元素逐渐淡出）这里有一个demo来看这个

<ul>
  <li>One
  <li>Two
  <li>Three
<script>
 $('li').fadeOut(600, function() {
   console.log('Faded');
 });
</script>

你可以尝试在整个列表上调用fadeout，如下所示：

$("#list")

Answer 3

它被执行3次是正常的，因为它会为已经淡出的每个fade-out调用li处理程序。你可以做的是跟踪有多少li必须褪色，一旦它们全部消失，请进行ajax调用。

var $listEls = $("#list li"),
    listElsCount = $listEls.length,
    fadedListElsCount = 0;

$listEls.fadeOut(600, function(){
    if (++fadedListElsCount !== listElsCount) {
         return;
    }
    $.ajax({
        type: "POST",
        url: "includes/functions/ajax.php",
        data: { id: id },
        dataType: "json",
    }).done(function(data){
        otherFunction(data);
    });         
}); 

你也可以简单地淡出整个列表。

$("#list").fadeOut(600, ...);

Answer 4

这是一个非常好的方法来修补它只运行一次多个jQuery调用

$('#1stID, #2ndID').fadeOut(350).promise().done(() => {
   //Do your thing that you only want to run once.
});