1

Ola sou novo e apenas se viro no js atualmente usando vueJs. porem ainda não consigo transformar processo normal em async await, nem com promisse, do jeito antigo.

Sei que tenho que fazer entrar na cabeça isso mais direto ao problema.

Tenho um metodo no vuejs.

Carregar(data) {

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

}

As vezes quando executo funciona ao colocar os dados no inicio do array para fazer um carregamento das mensagens progressivo, o scroll muda de posição então uso isso para que continua no msm lugar mais é inserto hora funciona hora não. acredito que um esta sendo mais rapido do que outro pela característica do js.

então como transformar essa função em algo que só depois que fazer

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

executar

window.scrollTo(0, posicaoscroll)

Desde já agradeço.

1 Resposta 1

3

então...

Seu código não tem nenhum problema de ordem de execução, a função "map" apenas faz o mapeio(com um looping) de um array e retorna um novo de acordo com a manipulação feita na callback de retorno. Sendo assim não está havendo nenhum salto de execução, pois o código fica preso no looping do map e só depois de finaliza-lo é que passa para a próxima linha.

Observação: O que você está fazendo se aplicaria melhor a um "forEach", pois a função "map" mapeia e retorna um novo array, ou seja, ela deve ser usada para situações na qual você depende de um mapeio convertendo os valores atuais em novos de acordo com a manipulação da callback. No seu caso você apenas precisa percorrer o array e adicionar seus valores a um outro array, fazendo com que o "forEach" seja muito mais eficaz e performático.

Se ainda assim quiser estipular um momento especifico para a execução do scroll, você pode fazer uma condicional que verifique a população do array de mensagens ou gerar um temporizador para atrasar a execução do scroll, deixarei os dois exemplos abaixo:

    // 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);
    }
4
  • 1
    Obrigado pela dica do forEach ;) Commented 28/04/2019 às 2:56
  • Vale lembrar que ao usar o forEach o looping se torna assíncrono ou seja, a função não vai esperar o looping terminar para passar para a próxima instrução como acontece com o map. Commented 29/04/2019 às 20:06
  • Felipe Duarte Negativo, a estrutura de looping segue o mesmo principio de base para todas as funcionalidades Declarativas do JavaScript(forEach, some, every, map, reduce, filter entre outras...). Commented 1/05/2019 às 2:55
  • A execução permanece procedural e síncrona com ambos, a execução do forEach utiliza de um loop for convencional(Imperativo) para rodar a callback passada para cada item do array fornecido! Commented 1/05/2019 às 3:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .