Can I wait for a DOM event to resolve?

Question

I've made a mistake. I paired my functionality to .on('click', ...) events. My system installs certain items and each item is categorized. Currently, my categories are [post, image, widgets], each having its own process and they are represented on the front-end as a list. Here's how it looks:

Each one of these, as I said, is paired to a click event. When the user clicks Install a nice loader appears, the <li> itself has stylish changes and so on.

I also happen to have a button which should allow the user to install all the items:

That's neat. Except...there is absolutely no way to do this without emulating user clicks. That's fine, but then, how can I wait for each item to complete (or not) before proceeding with the next?

How can I signal to the outside world that the install process is done?

It feels that if I use new CustomEvent, this will start to become hard to understand.

Here's some code of what I'm trying to achieve:

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>

As you can see, all clicks are launched at the same time. There's no way to wait for whatever a click triggered to finish.

Answer 1

I'd be looking to implement something like this:

let $items = $('.items .item');
let promises = new Array($items.length);

// trigger installation of the i'th component, remembering the state of that
function startInstallOnce(i) {
    if (!promises[i]) {
        let component = $items.get(i).data('component-name');
        promises[i] = installComponent(component);
    }
    return promises[i];
}

// used when a single item is clicked
$items.on('click', function(ev) {
    let i = $(this).index();
    startInstallOnce(i);
});

// install all (remaining) components in turn
$('#install-all').on('click', function(ev) {
    (function loop(i) {                      // async pseudo-recursive loop
       if (i === components.length) return;  // all done
       startInstallOnce(i).then(() => loop(i + 1));
    })(0);
});

Answer 2

What you should do is to declare a variable which will store the installation if it's in progress. And it will be checked when you are trying to install before one installation is complete.

var inProgress = false;
    const installComponent = () => {
      inProgress = true;
      return new Promise((resolve, reject) => {
        if(inProgress) return;
        else{
          setTimeout(() => {
            inProgress = false;
            return resolve();
          }, 1500);
        }
      });
    };

Answer 3

This is simple architectural problems with your application that can be solved by looking into a pattern that falls into MVC, Flux, etc.

I recommend flux a lot because it’s easy to understand and you can solve your issues by separating out your events and UI via a store and Actions.

In this case you would fire an action when clicking any of these buttons. The action could immediately update your store to set the UI into a loading state that disables clicking anything else and show the loader. The action would then process the loader which can be monitored with promises and upon completion the action would finalize by setting the loading state in the store to false and the UI can resolve to being normal again. The cool thing about the proper separation is the actions would be simple JS methods you can invoke to cause all elements to install if you so desire. Essentially, decoupling things now will make your life easier for all things.

This can sound very complicated and verbose for something as simple as click load wait finish but that’s what react, angular, flux, redux, mobx, etc are all trying to solve for you.

In this case I highly recommend examining React and Mobx with modern ECMaScript async/await to quickly make this issue and future design decisions much easier.