时间戳

首页 > 解决方案 > 在 Promise 解决后，Remove 实际上会删除一个 div

javascript - 在 Promise 解决后，Remove 实际上会删除一个 div

问题描述

我正在删除内容（一个 div），但首先等待动画（如果没有提供，则动画只是默认情况下已解决的 Promise）。看一下这个：

clearContent = (animation = Promise.resolve()) => {
  return new Promise((resolve, reject) => {

    const child = $('#child');

    animation.then(animationEvent => {
      const eventPackage = {
        'divRemoved': 'divIDPlaceholder',
        'itemRemoved': 'contentIDPlaceholder',
        'remainingItemsCount': 2,
        'remainingItems': 1
      };

      child.remove();

      const contentRemovedEvent = new CustomEvent('contentRemovedFromPlaceholder', {
        'detail': eventPackage
      });
      window.dispatchEvent(contentRemovedEvent);

      console.log('Removed!');

      return resolve(eventPackage);
    });
  });
}

const testAnimationThatTakesASecond = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve()
    }, 1000);
  });
}

$('#child').on('click', () => {
  clearContent(testAnimationThatTakesASecond());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="child">Remove me! The removal process can be animated as well!</div>

我的限制是我正在等待动画anime.js，我希望整个删除过程（即动画 + div 本身的删除）是可靠的，因为我可能会选择基于它链接一些东西. .

问题是虽然这是一个包装函数，但我有时会发现它在低 CPU 上无法正常工作。我在想可能是因为.remove在 promise 本身解决之后它本身就被移除了。

我认为 Promise 将始终等待其内部的任何代码完成，我错了吗？

标签： javascriptes6-promise

解决方案

您的功能很好，但是从您的最后一句话和评论来看，您对承诺的期望似乎并不完全正确。

如果您正在调用这样的代码：

clearContent(testAnimationThatTakesASecond());
console.log('something after resolved');

console.log 将在动画结束之前执行。执行不会在调用上下文中停止。

如果你需要在动画解决后做一些事情，你需要像这样使用它：

clearContent(testAnimationThatTakesASecond())
    .then(() => console.log('something after resolved'));

或使用异步：

$('#child').on('click', async () => {
    await clearContent(testAnimationThatTakesASecond());
    console.log('something after resolved');
});

推荐阅读