JS Обещания: Почему вы не можете настроить выполнение кода после обратного вызова setTimeout? - PullRequest
Новая
       74

JS Обещания: Почему вы не можете настроить выполнение кода после обратного вызова setTimeout?

0 голосов
/ 01 мая 2020

Я читаю эту статью о цепочке обещаний в Javascript, и я озадачен разделом, в котором написано how can we do something after the avatar has finished showing and gets removed? For instance, we’d like to show a form for editing that user or something else. As of now, there’s no way.

Это причина, по которой мы не можем сделать что-то после удаления изображения, которое img.remove() не возвращает обещание? Или setTimeout ничего не возвращает после завершения обратного вызова?

1 Ответ

2 голосов
/ 01 мая 2020

Это говорит о том, что, используя код в примере: 

setTimeout(() => img.remove(), 3000); // (*)

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

Рекомендация статьи, чтобы исправить это, состоит в том, чтобы иметь построенное разрешение Promise, когда вызывается .remove(): 

setTimeout(() => {
  img.remove();
  resolve(githubUser);
}, 3000);

Или вы можете добавить больше кода внутри setTimeout для запуска именно тогда, когда изображение будет удалено. 

setTimeout(() => {
  img.remove();
  console.log('removed');
}, 3000);

Если вы не выполните ни одного из вышеперечисленных действий, и вместо этого у просто setTimeout(() => img.remove(), 3000);, асинхронное действие, которое происходит через 3 секунды не может ничего сделать, кроме как удалить изображение - что обычно является ошибкой. Например, если вы хотите связать с ним еще один .then, который запускается при удалении изображения, и через 3 секунды необходимо удалить изображение 

.then(() => {
  // what logic to put in here to ensure next .then runs after 3 seconds?
  setTimeout(() => {
    img.remove();
  }, 3000);
})
.then(() => {
  console.log('image removed');
});

Когда внутри .then, следующий .then запуск после задержки, вы должны вернуть обещание из вышеуказанного .then, и это обещание должно быть выполнено после окончания задержки. 

.then(() => {
  // what logic to put in here to ensure next .then runs after 3 seconds?
  return new Promise((resolve) => {
    setTimeout(() => {
      img.remove();
    }, 3000);
  });
.then(() => {
  console.log('image removed');
});

Если вы не возвращайте обещание с верхнего .then, или, если вы вообще ничего не возвращаете, нижний .then запустится немедленно, как только верхний .then завершит работу, что вам не нужно.

...