如何使用 Ajax 使用函数的时间问题来淡入/淡出

Question

我认为这是一个时间问题...

我有标签更改，每次标签更改时都会重新加载新项目列表（通过 get_list 函数）。

“get_list”函数加载项目列表。在项目中，有一些带有 class='details'。这些详细信息可以隐藏或显示，具体取决于复选框是否选中。列表项加载，但详细信息不受复选框状态的影响。我怀疑是因为加载时间发生在执行淡入/淡出之后。

如果是这样，如何使它起作用 - 在淡入淡出执行之前是否可以合并延迟？或者有代码在执行淡入淡出之前检查列表是否加载？

console.log 验证项目的正确更改和状态。 当我手动单击复选框时，淡入/淡出（在另一个 scipt 中）起作用。

代码如下：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   tab = e.target.id // newly activated tab
   get_list(my_feedback,user_id,status,tab,feedback_limit,feedback_start);
   console.log(tab);  
    if($('#hide_details').is(":checked")){//show various details
        console.log('is checked');
        $('.details').fadeIn();
        $('.link-no-blue').addClass('no-link').removeClass('link-no-blue');
    }else{//hide various details
        console.log('is NOT checked');
        $('.details').fadeOut();
        $('.no-link').addClass('link-no-blue').removeClass('no-link');
    }
});

典型的 HTML：

<p class="details" style="margin:0px;"><strong>hotmail</strong><font color="#adb2ba">&nbsp;&nbsp;March 9, 2020&nbsp;&nbsp;User: 30</font>
    <span>&nbsp;&nbsp;&nbsp;<font color="#adb2ba">ID:124/features</font></span>
    <span style="float:right;"><span class="link edit_link" data-id="124">Edit</span>&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>Status: </strong>New</span>
    </span></p>

get_list 函数：

function get_list( my_feedback,user_id,status,tab, feedback_limit, feedback_start ){
    $.ajax({
        url:"/modules/feedback/feedback_ajax_list.php",
        method:"POST",
        data:{action:'get_list',
              my_feedback:my_feedback,
              user_id:user_id,
              status:status,
              tab:tab,
              feedback_limit:feedback_limit,
              feedback_start:feedback_start
            },
        success:function(data){
              //console.log(data);
              $("#data").append(data).hide().fadeIn(500);
        }
    }); 
}

Answer 1

通过在 get_list 函数的 Ajax 部分放置复选框显示/隐藏来解决。使用显示/隐藏代替，因为我已经在列表结果中消失了：

function get_list( my_feedback,user_id,status,tab, feedback_limit, feedback_start ){
        $.ajax({
            url:"/modules/feedback/feedback_ajax_list.php",
            method:"POST",
            data:{action:'get_list',
                  my_feedback:my_feedback,
                  user_id:user_id,
                  status:status,
                  tab:tab,
                  feedback_limit:feedback_limit,
                  feedback_start:feedback_start
                },
            success:function(data){
                //console.log(data);
                $("#data").append(data).hide().fadeIn(500);
                //show or hide details depending on the checkbox
                if($('#hide_details').is(":checked")){//show various details
                    console.log('is checked');
                    $('.details').show();
                    $('.link-no-blue').addClass('no-link').removeClass('link-no-blue');
                }else{//hide various details
                    console.log('is NOT checked');
                    $('.details').hide();
                    $('.no-link').addClass('link-no-blue').removeClass('no-link');
                }
            }
        }); 
    }

不需要更改或添加 Async: false 到 ajax，似乎工作正常