Question

请参见fiddle。我想允许我的应用根据需要将项目推送到队列中，以便根据用户事件（例如点击）进行解析。

我现在正在通过obtainItem()进行此操作，在这里我创建toDo作为一个承诺并推向obtainedItemsQueue，但是这些事件都是立即解决的，而不是等待通过单击按钮即可解决。

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

应通知用户已获得map，然后单击“确定”
单击“确定”后，将通知他们已获得bag
最后，单击“确定”后，将通知他们shirt已获得

如何将多个Promise放入队列，并解决诸如click之类的事件？

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更改为返回诺言的函数

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

事件发生后依序解决承诺

1 个答案: