Javascript Ajax对console.log输出的影响_Javascript_Jquery_Ajax_Firebug

Javascript Ajax对console.log输出的影响

javascript jquery ajax

Javascript Ajax对console.log输出的影响,javascript,jquery,ajax,firebug,Javascript,Jquery,Ajax,Firebug,让我们看看console.log的输出。如果我们使用函数changeName（），单击按钮会更改名称。但是如果我们使用函数changeNameAjax（）（其中response.name='Ford prefict'），单击按钮不会更改名称，只需第二次单击即可。为什么? <!DOCTYPE html> <head> <script type='text/javascript' src='js/jquery.js'></script>

让我们看看console.log的输出。如果我们使用函数

changeName（）

，单击按钮会更改名称。但是如果我们使用函数

changeNameAjax（）

（其中

response.name='Ford prefict'

），单击按钮不会更改名称，只需第二次单击即可。为什么?

<!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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
//changeName（）；
changeNameAjax（）；
var-box=document.getElementById（“box”）.innerHTML；
控制台日志（框）；
函数changeName（）{
$（“#box'）.html（“fordpiffect”）；
}
函数changeNameAjax（）{
$.ajax({
url:'getName.php？jsoncallback=？'，
数据类型：“json”，
成功：功能（响应）{
$（'#box'）.html（''+response.name+''）；
}
});
}
});
});
更新
阿瑟·登特

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

这是因为，这意味着

success

函数直到稍后服务器返回响应时才会运行。所以这一行：

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

$（'#box'）.html（''+response.name+''）；

在调用

console.log

之后才会运行，事实上，如果您单击“快速”或服务器速度较慢，则可以在

成功

功能完成一次之前单击几次

即使响应是即时的（例如本地服务器），因为JavaScript是单线程的，

success

之后仍然会发生……要看到这一点，只需在

success

函数中插入

console.log（'success'）

，然后，您将很好地了解调用的顺序和执行时间。

不太清楚，每次单击都会在单击函数的范围内定义一个新的changeNameAjax函数。第二次单击不可能到达上一次单击中定义的changeNameAjax函数，因为每次单击函数执行时，它都会得到一个新的作用域。