<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="start">发起请求</button>
<button id="end">停止请求</button>
<p id="value">返回值:<span></span></p>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
var status = 1;
$("#start").click(function () {
for (var i = 0; i < 5; i++) {
$.ajax({
url: "http://43.135.175.137:8787/index/index?id=" + i,//传什么返回什么
dataType: "json",
async: false,
success: function (data) {
shuchu(data.id);
}
});
$("#value span").html(i);
}
});
function shuchu(id) {
$("#value span").html(id);
}
})
</script>
</html>
在使用for循环进行ajax同步模式请求,将每次循环时请求出来的结果渲染到页面上,但是居然出问题了!作为一个前端不扎实的后端来说,俺emo了,没有按照我的想法 ,在span标签内进行 0,1,2,3,4进行输出。而是在所有的请求结束后,“duang” 出现了一个 4 !!,wc 我顿时就傻眼了。
据我了解,ajax同步是阻塞模式 ,所以按道理来讲,下一次循环应该在shuchu函数执行完成之后再进行呢,但是并没有
假设我现在在shuchu函数加一行代码,console.log(id),他竟然能生效,会伴随着每一次的循环打印出来,当场傻掉!!!
function shuchu(id) {
console.log(id);//立即执行
$("#value span").html(id);//最后一次循环才执行
}
请求大佬解答!!!!