js延时打印的实现

Posted 2023-03-22

参考技术A 最近在网上看到一个js题目，刚好最近学了Promise和Generator以及async，打算用这些方法实现一下。
题目很简单，如下：

实现每一秒输出数组中的一个数字。

我立马就想到了可以用Generator来实现这个效果，其中async是Generator的语法糖，所以就用async写了。因为Generator虽然是一个状态机，返回一个遍历器对象，但是它很适合用来异步操作。

我这边用async和Promise分别写了四种实现方法，其中第一种和第二种有点类似，但是有一点区别。第三种就是用递归实现，通过在Promise的then函数里再new一个Promise来达到效果。第四种就是普通的递归实现。

第一种：
async function apr(arr)
for(let i=0;i<arr.length;i++)

await (new Promise((resolve)=>setTimeout(resolve,1000,arr[i]))).then((value)=>console.log(value))



ls=[1,2,3]
apr(ls)

第二种：
async function apr(arr)
for(let i=0;i<arr.length;i++)

await new Promise((resolve)=>setTimeout(resolve,1000))
console.log(arr[i])



ls=[1,2,3]
apr(ls)

第三种：
function timeout(i=0)
if (i<arr.length)
new Promise((resolve) =>
setTimeout(resolve, 1000,arr[i++]);
).then((value)=>console.log(value);timeout(i));

arr=[1,2,3]
timeout()

第四种：
function timeout(i=0)
if (i<arr.length)
setTimeout(()=>console.log(arr[i++]);timeout(i), 1000);

arr=[1,2,3]
timeout()

JS延时

两个延时函数创建延时对象：

　　setTimeout("function",time):延时time后执行一次

　　setInterval("function",time):每隔time后执行一次

清除延时对象：

　　clearTimeout(对象)

　　clearInterval(对象)

window对象两个方法实现延时：

　　window.setTimeout()/window.setInterval()　　两者使用方法类似

　　function hello(){ alert("hello"); } window.setTimeout(hello,5000);

　　function hello(){ alert("hello"); } window.setTimeout("hello()",5000);

　　延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的:

　　function hello(){alert("hello");} var id=window.setTimeout(hello,5000); document.onclick=function(){window.clearTimeout(id);}