how to make js hope to resolve and start another

Question

Hello I’m new and just turn in js currently using vueJs. but I still can’t turn normal process into async await, nor with promise, the old way.

I know I have to get it into my head.

I have a way in vuejs.

Carregar(data) {

   let posicaoscroll = window.scrollY
   data.map(res => this.messages.unshift(res))
   window.scrollTo(0, posicaoscroll)

}

Sometimes when I run it works by putting the data at the beginning of the array to make a progressive message upload, the scroll changes position so I use it to continue in msm place more is insert hour works no time. I believe one is being faster than another by the characteristic of js.

then how to transform this function into something that only after doing

data.map(res => this.messages.unshift(res))

execute

window.scrollTo(0, posicaoscroll)

Thanks in advance.

Answer 1

then...

Its code has no running order problem, the "map" function only maps (with a looping) an array and returns a new one according to the manipulation made in the return callback. So there is no execution jump, because the code gets stuck in the looping of the map and only after finishing it goes to the next line.

Note: What you are doing would apply better to a "foreach", because the "map" function maps and returns a new array, that is, it should be used for situations where you depend on a map converting the current values into new ones according to the manipulation of the callback. In your case you just need to scroll through the array and add your values to another array, making "foreach" much more effective and performative.

If you still want to stipulate a specific time for the execution of the scroll, you can make a condition that checks the population of the array of messages or generate a timer to delay the execution of the scroll, I will leave the two examples below:

    // Verificação da população...

    Carregar(data) {

        let posicaoscroll = window.scrollY;
        data.map(res => this.messages.unshift(res));

        if (this.messages.length >= data.length) window.scrollTo(0, posicaoscroll);
    }

    // Atrasando a execução:

    Carregar(data) {

        let posicaoscroll = window.scrollY;
        data.map(res => this.messages.unshift(res));

        setTimeout(() => window.scrollTo(0, posicaoscroll), 1000);
    }