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;
}
CodePudding user response:
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());