Начните извлекать события, но подождите, пока само по себе и другое обещание не уляжется - JavaScript - PullRequest
0 голосов
/ 30 января 2019

Я разрабатываю организационную структуру.Я ищу советы по реструктуризации того, как я выполняю два обещания es6 для небольшого прироста производительности.

В событии щелчка я делаю 3 вещи последовательно:

  1. Воспроизвести первую анимацию(обещание)
  2. Получить все данные (обещание)
  3. Воспроизвести последнюю анимацию

В идеале мне бы хотелось:

  1. Начать выборкуdata
  2. Воспроизвести первую анимацию
  3. Воспроизвести последнюю анимацию (требуется извлеченные данные, но не может быть воспроизведено до окончания первой анимации)

Вот кодв вопросе:

/* Click happened! */

orgWrap.shiftRow({ row: clickY, from: clickX, to: focusX }).then(() => {
    /* Shiftrow is a promise triggering an animation,
       it resolved on 'transitionend' */

    fetch(`api/org/${target.id}/1`).then(result =>  {
        /* a function placing result in the DOM runs
           After data finished loading */

        orgWrap.populateRow({ data: result.children, row: clickY+1 });
        /* The animation which plays last, when shiftRow and fetch has settled */
  });

});

В нынешнем виде иногда между shiftRow и populateRow возникает неоправданная задержка, потому что он выбирает все данные после выполнения первой анимации и затем запускает последнюю анимацию, вместо этого begin должно извлекать данные при первом клике.Любые советы о том, как я могу рефакторинг и лучше использовать обещания и силу асинхронности?Я предпочитаю выполнять функции, которые обещают оставаться обещаниями, остальное я готов изменить.Любой вклад приветствуется.

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Оберните выборку и начните анимацию в Promise.all() и запустите анимацию конца после разрешения Promise.all.

Итак:

async function animate() {
  // some animation logic
}

Promise
  .all([
    animate(), // Beginning animation
    fetch("some.html")
  ])
  .then([, neededFetchData] => {
    return animate(neededFetchData);
  });
0 голосов
/ 30 января 2019

Вы можете использовать Promise.all для этого:

/* Click happened! */

Promise.all([
  orgWrap.shiftRow({ row: clickY, from: clickX, to: focusX }), // Shiftrow is a promise triggering an animation, it resolved on 'transitionend'
  fetch(`api/org/${target.id}/1`),
]).then(([animationResult, fetchResult]) => {
  /* a function placing result in the DOM runs after data finished loading */

  return orgWrap.populateRow({ data: result.children, row: clickY+1 }); // The animation which plays last, when shiftRow and fetch has settled
});

Также убедитесь, что объединены в цепочку ваших обратных вызовов по обещанию, вместо того, чтобы излишне вкладывать их .

0 голосов
/ 30 января 2019

Вы можете использовать Promise.all() для первых двух обещаний, then для третьего.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

...