javascript - 如何使用 Ajax 淡入/淡出函数的计时问题

Question

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

我有选项卡更改，每次选项卡更改时都会重新加载新项目列表(通过 get_list 函数)。

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

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

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

代码如下:

$('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，似乎按原样工作得很好