假如有这样的一个需求,如何实现呢
const script = [
{ type: "start", value: "开始测试" },
{ type: "sleep", value: 6000 },
{ type: "input", value: "PS5国行" },
{ type: "click", value: "点击搜索" },
{ type: "sleep", value: 9000 },
{ type: "move", value: [1000, 2000, 200, 200] },
{ type: "end", value: "测试结束" }
];
TA远方分析,这是异步请求任务,并且是连续的,在当前主流的一些浏览器的运行环境下,使用await,async的写法是可以实现,可浏览器是不支持的,用Promise是可以的,第一次接触,会发现new Promise() 会在new 立即执行的,经过调试,最终实现出来的主要方法syncFunctions,实现代码如下
const syncFunctions = e => {
let fun = (index,success) => {
let progr = e.funs;
new Promise((success,fail)=>{
progr[index]({
success: success,
fail: fail
});
}).then((res)=>{
if (typeof e.complete == 'function' && !e.complete(res)) {
let errObj = { code: 40001, index: index, errMsg: 'complete result is false' };
if(typeof e.fail == 'function') e.fail(errObj);
else throw new Error(errObj.errMsg);
return;
}
if (index+1<progr.length) {
fun(index+1,success);
} else {
if(typeof success == 'function') success(res);
}
}).catch((err)=>{
if(typeof e.fail == 'function') e.fail(err);
else console.error(err);
});
};
fun(0,e.success);
}
那么,如何调用syncFunctions()?,看看实现方法就知道了,如果还是不懂,那就晒出来给新手过过目,很简单的,拿去不谢 ( ̄_, ̄ )
const test = () => {
const script = [
{ type: "start", value: "开始测试" },
{ type: "sleep", value: 6000 },
{ type: "input", value: "PS5国行" },
{ type: "click", value: "点击搜索" },
{ type: "sleep", value: 9000 },
{ type: "move", value: [1000, 2000, 200, 200] },
{ type: "end", value: "测试结束" }
];
console.log('----start----');
syncFunctions({
funs: script.map((s)=>{
return (e) => {
console.time(s.type);
console.log('->Start t: '+s.type + ', value: ' + s.value);
switch(s.type){
case 'sleep':
setTimeout(()=>{
console.log('<-End t: '+s.type);
console.timeEnd(s.type);
e.success();
},parseInt(s.value));
break;
case 'move':
syncFunctions({
funs: s.value.map((v)=>{
return (e) => {
setTimeout(()=>{
console.log('-> t: '+s.type + ', value: ' + v);
e.success();
},v);
}
}),
success: ()=>{
console.log('<-End t: '+s.type);
console.timeEnd(s.type);
e.success();
}
});
break;
default:
setTimeout(()=>{
console.log('<-End t: '+s.type);
console.timeEnd(s.type);
e.success();
},1);
}
};
}),
success: (res) => {
console.log('----end----');
}
});
}
最后晒一下调试输出日志,以证清白。