异步编程 | Js实现定时打印的几种方式

Posted 2021-04-13 游脑诗

前几周学习了《》、《》、《》、《》、《》、《》。本篇来看看分别用setTimeout、Promise、async/await、Genarator来实现定时打印数组中的值的实现。

只有Es5时的实现方式

闭包+递归+setTimeout：

//闭包+递归+setTimeoutconst list = [1, 2, 3];function show() { let count = 0; return function showArr(arr) { setTimeout(() => { console.log("打印：", arr[count++]); if (count === arr.length) { return; } showArr(arr); }, 1000); };}const showArr = show();showArr(list);

有了ES6的实现方式

1、promise+async/await+for循环：

//promise+await+for循环const list = [1, 2, 3];const square = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(num); }, 1000); });};
async function showArr(list) { for(let item of list) { let value = await square(item) console.log("打印：", value); }}showArr(list)

2、Generator+async/await+for...of循环

const list = [1, 2, 3];
function* square(value) { yield new Promise((rs,rj)=> { setTimeout(() => { rs(value) console.log("打印：", value); }, 1000*value); })}
function showArr(list) { for(let item of list) { let obj = square(item)      console.log('obj:', obj) let next = obj.next() //前面一个next执行完后面的next才会执行 }}showArr(list)

关于Generator实现的要点是，调用Generator的迭代器，只有通过迭代器的next方法才能执行下一个yield结果，不调用不会执行yield语句；且多个next()语句是按照其代码书写顺序执行。也就是，调用多个迭代器的next()，按书写顺序逐一调用yield语句后面的表达式。

更多：for...of会自动调用Generator函数，且按语句书写顺序逐一执行函数中的yield语句。

function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; //没有return执行效果一样}
for (let v of foo()) { console.log(v);}// 1 2 3 4 5