javascript - 如何迭代 jQuery 对象并等待事件？

Question

有人能解释一下如何等待事件完成才能在 for 循环内进行下一次迭代吗？例如:

for ( i=0; i < item.length; i++ ) {
  $(video[i]).on('loadeddata', function() {
    // do my stuff
  })
}

现在，通过这段代码，我只是以正确的顺序向每个视频添加一个事件监听器，但显然它们不会以这种方式加载。当他们完成加载时，他们会做我的其他事情，因为它是不可预测的，这会破坏页面上显示项目的顺序。那么，我怎样才能制作 for循环等待事件完成它自己的事情，然后再进入下一次迭代？

编辑:我正在根据要求添加更多信息。我实际上有一个对象，其中包含 HTML 元素。该对象通过 var items = $('.db-gallery-item') 检索。正如我所说，这个对象的值是 <div>元素，包含容器 <div>里面有两个图像元素( <img> 和 <a> )和一个 <video>视频元素。加载它们时我必须保持它们的顺序，因此需要等待每个元素加载以使其可见并继续处理下一个元素。

已解决:通过 palash 提出的解决方案设法解决了这个问题。这是我使用的最终代码。

if(i_length > 0) {
    (async function() {
        for (i = 0; i < i_length; i++) {
            var item = $(items[i]);
            if($(item).find('.dbg-video').length == 1) {
                var video = $(item[0]).children().children();
                if(video[0].readyState > 3) {
                    item.removeClass('db-are-unloaded');
                    $grid.masonry('appended', $(item));
                }
                else {
                    await new Promise(resolve => video[0].addEventListener('loadeddata', resolve));
                    $(item[0]).removeClass('db-are-unloaded');
                    $grid.masonry('appended', $(item[0]));
                }
            } 
            else if($(item).find('.db-gallery-image').length == 1) {
                await new Promise(resolve => $(item[0]).imagesLoaded().done(resolve));
                $(item[0]).removeClass('db-are-unloaded');                                          
                $grid.masonry('appended', $(item[0]));
            }
        }
    }());
};

这是一个JSFiddle工作示例。

Answer 1

您可以使用for..await逻辑，例如:

(async function() {
   for (i = 0; i < video.length; i++) {
      await new Promise(resolve => video[i].addEventListener('loadeddata', resolve));
      // do my stuff
   }
}());

这里，for 循环迭代将等待 video 上的 loadeddata 事件完成。

演示:

const fruitsToGet = ['apple', 'grape', 'pear']
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const getNumFruit = (fruit, delay) => sleep(delay).then(v => fruit);

// Since getNumFruit returns a promise, we can await the resolved value before logging it.
const init = async () => {
  console.log('Start')

  for (let i = 0; i < fruitsToGet.length; i++) {
    const rand = Math.floor(Math.random() * 6) * 1000;
    const numFruit = await getNumFruit(fruitsToGet[i], rand)
    console.log(numFruit, 'delay: ' + rand)
  }

  console.log('End')
}
init()