无法摆脱 ajax 页面加载后的内容闪烁

Can't get rid of a flash of content from after ajax page load

本文关键字：闪烁 加载 ajax      更新时间：2023-09-26

我有一个页面，它根据点击的元素进行不同的ajax调用。有四个 ID，在任何给定时刻只应有一个可见。当我将新的 ajax 内容加载到div 中时，我的问题就来了 - 我在以前内容的非常短暂的一秒钟内得到了一个闪光。这是我其中一个调用的函数之一(它们本质上都是相同的(。在函数的开头，我隐藏了所有内容。然后在 ajax 加载后，我显示相关的div。我很困惑为什么这行不通。应该没有闪光灯，因为所有的div都是隐藏的，对吧？

            $('body').on("click", "#answer-submit", function() {
                $('#games, #location, #question, #answer').css('display' , 'none');
                var theAnswer = $('#challenge-answer').val();
                   $.ajax({ 
                        type: "POST",
                        url: "ajax/answer.php",
                        data: { answer : theAnswer },
                        dataType: "html",
                        success: function(msg){
                                    if(parseInt(msg)!=0) {
                                        $('#answer').html(msg);
                                    }
                                }
                    }); 
                    $('#answer').css('display' , 'block');
            });

问题是异步请求将异步发生。换句话说，你的成功函数将在$('#answer').css('display' , 'block');之后被调用(这是一个竞争条件，但实际上是有保证的(。解决方案很简单 -- 将$('#answer').css('display' , 'block');移动到 success 函数中：

        $('body').on("click", "#answer-submit", function() {
            $('#games, #location, #question, #answer').css('display' , 'none');
            var theAnswer = $('#challenge-answer').val();
               $.ajax({ 
                    type: "POST",
                    url: "ajax/answer.php",
                    data: { answer : theAnswer },
                    dataType: "html",
                    success: function(msg){
                                if(parseInt(msg)!=0) {
                                    $('#answer').html(msg);
                                    $('#answer').css('display' , 'block');
                                }
                            }
                }); 
        });

您甚至可以像这样链接它：

if (parseInt(msg) != 0) {
  $('#answer')
    .html(msg)
    .css('display', 'block');
}
相关文章：