Разрешать обещания последовательно после события

Question

См. скрипка .Я хочу разрешить моему приложению помещать элементы по мере необходимости в очередь для разрешения при пользовательском событии (например, щелчок).

Я делаю это сейчас через 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();

Answer 1

обновленная скрипта

изменить toDo на функцию, которая возвращает обещание

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

и изменить chain.then для выполнения itemкоторая теперь является функцией

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

resolveItems();