Question

让我们看一下console.log的输出。如果我们使用函数changeName()，则单击该按钮会更改名称。但是如果我们使用函数changeNameAjax()（其中response.name = 'Ford Prefect'），则单击该按钮不会更改名称，只需单击第二次即可。为什么呢？

<!DOCTYPE html>
<head>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function(){

            //changeName();
            changeNameAjax();

            var box = document.getElementById("box").innerHTML;
            console.log(box);

            function changeName(){
                $('#box').html('<p>Ford Prefect</p>');
            }

            function changeNameAjax(){
                $.ajax({
                    url: 'getName.php?jsoncallback=?',
                    dataType: 'json',
                    success: function(response){
                        $('#box').html('<p>' + response.name + '</p>');
                    }
                });
            }

        });
    });
</script>
</head>
<body>
    <button>Update</button>
    <div id='box'>
        <p>Arthur Dent</p>
    </div>
</body>
</html>

Answer 1

我的10美分：这是因为您在click事件中声明了changeNameAjax（）函数。第一次单击将定义该函数，第二次将执行它。

Answer 2

这是因为AJAX is asynchronous，意味着success函数在服务器的响应返回后才会运行。所以这一行：

$('#box').html('<p>' + response.name + '</p>');

在之后调用console.log后才运行，事实上如果你快点击或服务器很慢，你可以在success之前点击几次功能完成一次。

即使响应是 instantaneous （例如本地服务器），由于JavaScript是单线程的，之后仍然会发生success ...为了看到这一点，只需坚持{{ 1}}在你的console.log('Success')函数中，你就可以很好地说明顺序和回调执行的时间。

Ajax对console.log输出的影响

2 个答案: