javascript - 事件发生后按顺序解决 promise

Question

参见fiddle 。我希望允许我的应用程序根据需要将项目推送到队列中，以便在用户事件(例如，单击)上解决。

我现在通过 obtainItem() 执行此操作，在其中创建 toDo 作为 promise 并将其推送到 obtainedItemsQueue 中，但是事件全部立即解决，而不是等待通过单击按钮来解决。

在此示例中，应该发生的是:

• 用户应收到 map 已获取的通知，然后点击“确定”
• 点击“确定”后，他们将收到袋子已获得的通知
• 最后，点击“确定”后，他们将收到衬衫已获得的通知

如何将多个 Promise 推送到队列中，并解析点击等事件？

let obtainedItemsQueue = [];

function obtainItem(itemStr) {
    let toDo = new Promise(resolve => {
        $('.content').append(`<span class="text">${itemStr}</span>`);
        $('.content').append('<button>Okay</button>');
        $('button').on('click', function() {
          $('.content').empty();
          resolve(`${itemStr} is resolved.`);
        });
  });

  obtainedItemsQueue.push(toDo);
}

obtainItem('map');
obtainItem('bag');
obtainItem('shirt');

function resolveItems() {
  let chain = Promise.resolve();
  obtainedItemsQueue.forEach((item) => {
        chain = chain.then(() => item);
  });


  return chain;
}

resolveItems();

Answer 1

updated fiddle

将 toDo 更改为返回 Promise 的函数

let obtainedItemsQueue = [];

function obtainItem(itemStr) {
    let toDo = () => new Promise(resolve => {
        $('.content').append(`<span class="text">${itemStr}</span>`);
        $('.content').append('<button>Okay</button>');
        $('button').on('click', function() {
            $('.content').empty();
            resolve(`${itemStr} is resolved.`);
        });
    });

    obtainedItemsQueue.push(toDo);
}

obtainItem('map');
obtainItem('bag');
obtainItem('shirt');

并更改链。然后执行item，它现在是一个函数

function resolveItems() {
    let chain = Promise.resolve();
    obtainedItemsQueue.forEach((item) => {
        chain = chain.then(item);
    });
    return chain;
}

resolveItems();