js延时打印的实现

JavaScript010

js延时打印的实现,第1张

最近在网上看到一个js题目,刚好最近学了Promise和Generator以及async,打算用这些方法实现一下。

题目很简单,如下:

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

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

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

第一种:

async function apr(arr){

for(let i=0i<arr.lengthi++)

{

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=0i<arr.lengthi++)

{

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()

console.time方法与console.timeEnd方法

当需要统计一段代码的执行时间时,可以使用 console.time 方法与 console.timeEnd 方法。

其中 console.time 方法用于标记开始时间,console.timeEnd 方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。这两个方法的使用方法如下所示。

console.time(label)  

console.timeEnd(label) 

这两个方法均使用一个参数,参数值可以为任何【字符串】,但是这两个方法所使用的参数字符串必须相同,才能正确地统计出开始时间与结束时间之间所经过的毫秒数。