让我们看看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>
最佳答案
这是因为AJAX is asynchronous ，这意味着 success 函数直到稍后服务器响应返回时才会运行。所以这一行:
$('#box').html('<p>' + response.name + '</p>');
只有在调用console.log之后才会运行，事实上，如果您单击速度过快或服务器速度较慢，您可以在调用之前多次单击success 函数完成一次。
即使响应是瞬时(例如本地服务器)，由于 JavaScript 是单线程的，成功 仍然会在之后发生......要看到这一点，只需坚持在您的 success 函数中添加一个 console.log('Success') ，然后您就可以很好地了解回调的执行顺序和时间。
关于javascript - Ajax 对 console.log 输出的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3008412/