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

时间:2013-04-15 23:13:57

标签: jquery jquery-callback fadeout

这就是我的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请求。

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

谢谢!

4 个答案:

答案 0 :(得分:6)

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

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

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

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

答案 1 :(得分:1)

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

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

您可以尝试在整个列表中调用fadeout,如下所示:

$("#list")

答案 2 :(得分:1)

执行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, ...);

答案 3 :(得分:0)

这是将其修补为只能通过多个jQuery调用运行一次的好方法

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