i am tying to understand how to use await in my situation.
i have this code:
updateMap() {
this.paramsTemp = 0;
if(this.updateMapCheck == true){
this.loading = true;
this.arrOfDisplays.forEach((display, index) => {
if (display.removed == true) {
if (this.locationsToSend[index + 1]) {
this.drawOneTrip(index, index + 1, index); // here after first one finish we go to another call, here i need await?
display.removed = false;
}
}
});
// after finish above i want to go to this.markerArr...
this.markersArr.forEach((marker, index) => {
marker.set("label", { text: "" + index, color: "white" });
});
// here most important, if above finish i want to call this.changeTime()
// wait to finish every think above to call changeTime()
this.changeTime();
// while every think finish in changeTime() i want to do last 2 line.
this.loading = false;
this.map.setZoom(14);
}
else{
this.showToasterErrorUpdateMap();
}
}
all information needed i put in code.
How to use await in above situation?
before i am using setTimeout for each step with time approximately, but not work perfectly because probably compiler go to another step before finish first step.
Array.prototype.map and Promise.all. map will create an array of Promises and will then be resolved using await Promise.all([]) await Promise.all(arrOfDisplays.map(async (elem, index) => {
if (display.removed == true) {
if (this.locationsToSend[index + 1]) {
await this.drawOneTrip(index, index + 1, index);
display.removed = false;
}
}
})
);More about map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
And about Promise.All: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
You can use 'await' inside any function you declared as 'async' and you use 'await' to wait for any asynchronous function call to finish before moving to the next line of code, so it really depends on which of you function calls are asynchronous.
Assuming drawOneTrip, marker.set and changeTime are in fact asynchronous then:
async updateMap() {
this.paramsTemp = 0;
if(this.updateMapCheck == true){
this.loading = true;
this.arrOfDisplays.forEach((display, index) => {
if (display.removed == true) {
if (this.locationsToSend[index + 1]) {
await this.drawOneTrip(index, index + 1, index); // here after first one finish we go to another call, here i need await?
display.removed = false;
}
}
});
this.markersArr.forEach((marker, index) => {
await marker.set("label", { text: "" + index, color: "white" });
});
await this.changeTime();
this.loading = false;
this.map.setZoom(14);
}
else{
this.showToasterErrorUpdateMap();
}
}
Of course if any of these functions are not asynchronous then putting await in front of its call makes no sense.