How to consistently load the model in the main container?

Good morning. I almost do not understand the promises and asynchronous function, so I decided to ask you. The problem is simple, but for me it is difficult to solve because no grasp of knowledge. I looked at the work of promises and async functions, but it has not given me anything.
That's the problem. I have an array that holds the urn models. I load the model in the main container using their urn, but, as it happens asynchronously. I need to first boot the first model, i.e. the first urn, and then second. Here is my code, which runs asynchronously.
arrId.map(model => {
 Autodesk.Viewing.Document.load(model onDocumentLoadSuccess, onDocumentLoadFailure);
});


More important for me to understand, so you can just show how it would work with something else, like a picture or something else.

Thanks in advance.
March 19th 20 at 08:35
1 answer
March 19th 20 at 08:37
Solution
Apparently, you have an event onDocumentLoadSuccess. You can use it to implement the loading of the models in turn. In its simplest and most visual implementation, you can do something like:

// this is the initial index of the model
const i = 0;

// callback on successful download
const onDocumentLoadSuccess = () => {
i++;
 (if arrId[i]) {
loader(i);
 } else {
 alert('all models loaded');
}
};

// the function takes the index of the model in the array and starts the loader
const loader = (modelIndex) => {
 Autodesk.Viewing.Document.load(arrId[modelIndex], onDocumentLoadSuccess, onDocumentLoadFailure);
};

// run the loader to a null element
loader(i);


Accordingly, first work out the first model, the base callback a successful download, we incrementorum the index and run the second model, etc. until do not load all the models.

Find more questions by tags JavaScript