JS little essays on synchronous asynchronous

Baidu recently doing a map drawn track, due to the multi-line while drawing encountered a problem, that is, when the last line drawing is complete, the best view on the last stop in a line, so for the experience is very poor, so search Baidu solutions

Initially the program:

// Render cycle 
jsonObject.list.forEach (function (routes) { 
    makeRoutes (routes) 
})

 

Note that in the search process js a characteristic, that is, when the js in foreach execution is asynchronous, so is unable to control the trajectory of a draw after the completion of the last adjustment the best view, but not recursive, so follow-up will be achieved following code into a

 

the viewport = var [] 

// recursive ensure that the last line to adjust a loaded optimum visibility 
var index = 0 
Loop (0) 
function Loop (index) { 
    setTimeout (function () {// setTimeout analog with asynchronous function 
        if (index <jsonObject.list.length) { 
            the viewport = viewport.concat (makeRoutes (jsonObject.list [index])) 
            index ++ 
            Loop (index); 
        } the else { 
            map.setViewport (the viewport) is adjusted to the best view // 
        } 
    }, 500); 
} 


perfect realization of functions, but this approach does not resolve the problems caused by the delay Caton large amount of data to bring