javascript - 加载ajax页面后无法摆脱内容的闪光

Question

我有一个页面会根据用户点击的元素进行不同的 ajax 调用。有四个 ID，在任何给定时刻只能看到一个。当我将新的 ajax 内容加载到一个 div 中时，我的问题就来了——我在之前的内容中闪现了一秒钟。这是我的其中一个调用的功能之一(它们本质上都是相同的)。在函数的开头，我隐藏了所有内容。然后在 ajax 加载后我显示相关的 div。我很困惑为什么这行不通。应该没有 flash，因为所有的 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 1

问题是异步请求将异步发生。换句话说，您的成功函数将在 $('#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');
}