使用生成器方式实现:
生成器函数就是返回一个迭代器的函数,包含一个*,在它的函数体内使用yield关键字,函数会在每个yield后暂停,等待,直到这个生成的对象, 然后调用下一个next()方法,每调用一次next会往下执行一次yieId,然后暂停直到最后结束
具体例子如下:
<!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>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
<button onClick="clickFunc()">查询</button>
</body>
<script
type="text/javascript"
src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"
></script>
<script>
var url =
"https://localhost/geo?key=160cab8ad6c50752175d76e61ef92c5x&address=";
var result_obj = new Map();
var task = null;
function clickFun() {
var oText = $("#textarea");
var vals = oText.val();
var val_tmp = vals.split(",");
var arr = [];
console.log("val_tmp--", val_tmp);
// 开发触发第一次task
task = loadFun(url, val_tmp);
task.next();
const obj = Object.fromEntries(result_obj);
console.log(obj);
console.log("result_obj--结束啦", result_obj.entries());
}
function clickFunc() {
clickFun();
}
function* loadFun(url, val_tmp) {
for (let i = 0; i < val_tmp.length; i++) {
var item = val_tmp[i];
// yield 任务
var res = yield load(url, item);
console.log("iii", i);
}
}
function load(url, item) {
item = item.trim();
url += item;
url += "";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = xhr.responseText;
var json_tmp = json;
json_tmp = json_tmp.substr(0, json_tmp.lastIndexOf(")"));
json_tmp = json_tmp.split("jsonp_242455_(")[1];
var result = $.parseJSON(json_tmp);
var geocodes = result.geocodes && result.geocodes[0];
var tmppp =
geocodes.province + " " + geocodes.city + " " + geocodes.district;
result_obj.set(item, tmppp);
// 调用下一个next方法
task.next();
console.log(result_obj);
}
};
xhr.onerror = function (error) {
console.log("error====", error);
};
}
</script>
</html>