Question

我有一个页面根据点击的元素进行不同的ajax调用。有四个ID，在任何给定时刻只能看到一个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 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');
}

在ajax页面加载后无法摆脱闪存内容

1 个答案: