Я разрабатываю организационную структуру.Я ищу советы по реструктуризации того, как я выполняю два обещания es6 для небольшого прироста производительности.
В событии щелчка я делаю 3 вещи последовательно:
- Воспроизвести первую анимацию(обещание)
- Получить все данные (обещание)
- Воспроизвести последнюю анимацию
В идеале мне бы хотелось:
- Начать выборкуdata
- Воспроизвести первую анимацию
- Воспроизвести последнюю анимацию (требуется извлеченные данные, но не может быть воспроизведено до окончания первой анимации)
Вот кодв вопросе:
/* 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 должно извлекать данные при первом клике.Любые советы о том, как я могу рефакторинг и лучше использовать обещания и силу асинхронности?Я предпочитаю выполнять функции, которые обещают оставаться обещаниями, остальное я готов изменить.Любой вклад приветствуется.