我可以等待DOM事件解决吗？

Question

我犯了一个错误。我将功能与.on('click', ...)事件配对。我的系统安装了某些项目，并且每个项目都已分类。当前，我的类别为[post, image, widgets]，每个类别都有其自己的过程，并且在前端以列表的形式表示。外观如下：

正如我所说，其中每个都与一个点击事件配对。当用户单击Install时，会出现一个不错的加载程序，<li>本身具有时髦的更改，依此类推。

我也碰巧拥有一个应该允许用户安装所有物品的按钮：

整洁。除了...如果没有模拟用户点击，绝对没有办法做到这一点。很好，但是然后，在继续进行下一个项目之前，我如何才能等待每个项目完成（或不完成）？

我如何向外界表明安装过程已完成？

[如果我使用new CustomEvent，这将开始变得难以理解。

以下是我要实现的代码：

const installComponent = () => {

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve();
    }, 1500);
  });
};

$('.item').on('click', (event) => {
  installComponent().then(() => {
    console.log('Done with item!');
  });
});

$('#install-all').on('click', (event) => {
  const items = $('.item');
  items.each((index, element) => {
    element.click();
  });
});

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.items {
  display: flex;
  flex-direction: column;
  width: 360px;
}

.item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0;
}

.item h3 {
  width: 80%;
}

.install-component {
  width: 20%;
}

#install-all {
  width: 360px;
  height: 48px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="items">
  <li class="item" data-component-name="widgets">
    <h3>Widgets</h3>
    <button class="install-component">Install </button>
  </li>
  <li class="item" data-component-name="post">
    <h3>Posts</h3>
    <button class="install-component">Install </button>
  </li>
  <li class="item" data-component-name="images">
    <h3>Images</h3>
    <button class="install-component">Install </button>
  </li>
</ul>
<button id="install-all">Install All</button>

如您所见，所有点击均在同一时间启动。无法等待触发的点击完成。

Answer 1

这是应用程序中的简单体系结构问题，可以通过研究属于MVC，Flux等的模式来解决。

我建议使用很多通量，因为通俗易懂，您可以通过商店和操作将事件和用户界面分开来解决问题。

在这种情况下，单击任何这些按钮时都会触发操作。该操作可能会立即更新您的商店，以将UI设置为加载状态，从而无法单击其他任何东西并显示加载程序。然后，该操作将处理可以用诺言进行监视的加载器，并且在完成后，该操作将通过将存储中的加载状态设置为false来完成，并且UI可以再次确定为正常。关于正确分离的一个很酷的事情是，操作将是简单的JS方法，您可以根据需要调用这些方法来导致所有元素都安装。从本质上讲，现在将事物解耦将使您的生活更轻松。

这听起来很复杂和冗长，就像单击加载等待完成一样，但这就是反应，角度，通量，redux，mobx等都在为您解决的问题。

在这种情况下，我强烈建议您使用现代的ECMaScript async / await检查React和Mobx，以快速解决此问题并简化未来的设计决策。