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. => {
 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
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 = () => {
 (if arrId[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

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