【javascript】同步的循环转换成异步循环

前言

• react在单线程上玩的越来越6，不禁产生这样的思考，如何将同步循环转换成异步循环。

实际意义

• 在单线程中，异步循环还是很有必要的，如果同步数据量过大，会造成浏览器卡死。

思路

一、递归

• js的异步无非那几个api，我以settimeout为例，套一个函数使用递归即可：

const arr = [1,2,3,4,5,6,7]
let count =0 
const go= ()=>{
    
    
    if(count < arr.length){
    
    
        setTimeout(() => {
    
    
            console.log(arr[count])            
            count = count+1
            go()
        }, 1000);
    }
}
go()

二、利用死循环api

• 死循环api比如idleCallback之类：

const arr = [1,2,3,4,5,6,7]
let count =0 

const go = (deadline)=>{
    
    
    while ((deadline.timeRemaining() > 0 || deadline.timeout) && count < arr.length) {
    
    
        console.log(arr[count])
       count = count + 1
    }
}
window.requestIdleCallback(go, {
    
     timeout: 1000 })