0

这是我的 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 请求执行了 3 次。如果我删除淡入淡出功能，请求会正确执行（仅一次），因此可能运行的次数与列表中的项目一样多，我觉得这很奇怪。那可能吗？你能帮我找出解决办法吗？我真的需要仅在fadeOut 函数完成时才执行该ajax 请求。

我希望我说清楚了，如果我弄乱了我的英语，我深表歉意。

谢谢！

4

4 回答 4

6

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

如果您使用.promise()，您可以排队一个回调，该回调将等待给定集合上的所有动画完成：

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

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

于 2013-04-15T23:21:47.037 回答
1

问题是你的选择器引用了 3 个元素，所以回调被执行了 3 次（每个元素淡出一个） 这是一个演示来看看这个

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

您可以尝试在整个列表上调用淡出，如下所示：

$("#list")
于 2013-04-15T23:18:11.537 回答
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, ...);
于 2013-04-15T23:19:23.260 回答
0

这是一个非常好的方法，可以将其修补为仅使用多个 jQuery 调用运行一次

$('#1stID, #2ndID').fadeOut(350).promise().done(() => {
   //Do your thing that you only want to run once.
});
于 2019-02-22T22:37:50.797 回答