似乎无法让 JavaScript 同步运行

Question

I have a few functions that need to be performed in order and JavaScript tends to do them asynchronous. I've looked into various methods of solving this problem including using callbacks, creating my own promise, a Promise.all() technique, and finally a newer version using async functions and await. I still wasn't able to get the code to run the way I wanted to.

The idea is, run initialize() first, initialize calls colorcells, and finally last thing to run is draw_path.

function initialize() {   
 for (let i = 1; i < 20; i++) {
     setTimeout(() => {
       colorcells(i)
     }, i * 30)}
}
    
function colorcells (cell){
  // then execute this function from initialize
}
        
function draw_path(){
   // this should be the last function to get executed
}

async function init(){
     await initialize()
     draw_path()
 }

// starts our code
init()

Answer 1

You could use promise, but it would make more sense to code a "queue" and when it is done, you call the next step.

 const max = 20; let current = 1; function colorNext() { colorCell(current); current++; if (current < max) { window.setTimeout(colorNext, 30); } else { drawPath(); } } function colorCell(cell) { console.log("Color", cell); } function drawPath() { console.log('draw called'); } colorNext();

It can be done with promises, but there is no need to read all those timeouts.