I have a helper function that calls other functions. I want the called functions to finish before continuing on in the helper function.

currently they are both changing things at the same time.

    helperDikjstras = async () => {
        const { grid } = this.state;
        // console.log(grid);
        const startnode = grid[START_NODE_ROW][START_NODE_COL];
        const endnode = grid[END_NODE_ROW][END_NODE_COL];
        const visitedNodes = Dikjstras(grid, startnode, endnode);
        console.log(visitedNodes);
        const path = this.shortestPathFromEnd(startnode, endnode);

        await this.colorVisited(visitedNodes);     // I want this function to finish before continuing
        await this.colorPath(path);
        return;
    }

    colorVisited = async (visitedNodes, _callback) => {
        for (let i = 0; i < visitedNodes.length; i++) {
            console.log("helperDikjstras")
            setTimeout(() => {
                const node = visitedNodes[i];
                var element = document.getElementById(`node-${node.row}-${node.col}`);
                if (!element.classList.contains("startnode") && !element.classList.contains("endnode")) {
                    element.classList.add("node-visited");
                }
            }, 100 * i);
        }
        return;
    }

    colorPath = async (path) =>{
        for (let i = 0; i < path.length; i++) {
            console.log("helperDikjstras")
            setTimeout(() => {
                const node = path[i];
                var element = document.getElementById(`node-${node.row}-${node.col}`);
                if (!element.classList.contains("startnode") && !element.classList.contains("endnode")) {
                    element.classList.add("node-path");
                }
            }, 100 * i);
        }
        return;
    }

>Solution :

Of course they do, that’s the way it works. There is no "interupt" or pause capability in JavaScript. To achieve your goal, call your follow-on functions in the subsequent .then() of the first await.

Like so:

helperDikjstras = async() => {/*...*/}
colorVisited = async(visitedNodes, _callback) => {/*...*/}
colorPath = async(path) => {/*...*/}


helperDikjstras()
  .then(() => colorVisited(blah, halb))
  .then(() => colorPath(somePath));

If you needed to have other functions run after colorPath() you can simply add more…

helperDikjstras()
  .then(() => colorVisited(blah, halb))
  .then(() => colorPath(somePath))
  .then(() => doSomethingElse())
  .then(() => andAnother())
  .then(() => etc());