JS 关于同步异步的一点小随笔

最近在做一个百度地图轨迹绘制，由于多线路同时绘制遇到了了一个问题，就是当最后一个线路绘制完成后，最佳视野停在最后一个线路上，这样对于体验来说是非常差的，于是进行百度搜索解决方案

最初方案：

//循环渲染
jsonObject.list.forEach(function (routes) {
    makeRoutes(routes)
})

在搜索的过程中注意到了js的一个特点，那就是js在foreach执行的时候，是异步进行的，这样是无法控制最后一个轨迹绘制完成后再进行最佳视野的调整，但是递归不会，所以后续将实现改成了下面的代码

var viewport = []

//使用递归确保最后一条线路加载完成后调整一个最佳的视野
var index = 0
loop(0)
function loop(index) {
    setTimeout(function(){//用setTimeout模拟异步函数
        if (index<jsonObject.list.length) {
            viewport = viewport.concat(makeRoutes(jsonObject.list[index]))
            index ++
            loop(index);
        } else {
            map.setViewport(viewport)        //调整到最佳视野
        }
    }, 500);
}


完美实现功能，但是这个办法仍然无法解决由于数据量大带来的延迟卡顿问题