事后按顺序解决承诺

看到了吗 fiddle

我现在已经完成了 obtainItem() toDo 作为承诺和推动 obtainedItemsQueue ,但所有事件都将一次解决,而不是等待通过单击按钮来解决。

在这个例子中,应该发生的是:

• map 然后他们点击“好的”
• 单击“确定”后,将通知他们 bag 获得
• 最后,单击“确定”后,将通知他们 shirt 获得

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();