Javascript - 如何等待事件侦听器结束到下一次迭代

Question

我在 for 循环中遇到事件侦听器的问题。

我基本上是这样的：

 for (var i = 0; i < 2; i++) { //window url change here, each iteration open a different url console.log('what??'); window.addEventListener('load', aperture, true); function aperture() { console.log('here'); window.close(); } }

因此，我必须等待窗口加载才能执行该函数，然后转到 next 进行迭代并执行相同的操作。 但是我通过查看此日志获得的是：

    what??
    what??
    here
    here

如何在迭代之间等待事件侦听器完成？

Answer 1

我就回答你实际问的问题...

如何在迭代之间等待事件侦听器完成？

你不能用真正的循环来做到这一点，制作异步“循环”的唯一方法是使用递归，这可能有点复杂。 这个想法是创建一个函数，当它准备好再次迭代时会调用自己。

 (function myLoop(){ // do something that takes a while setTimeout(function(){ console.log("did something"); // then recurse... myLoop(); }, 1500); })();

如果你在一个数组上循环，这个概念是相似的......这是我写的一个通用函数来做到这一点......

 var myArray = ["a","b","c","d"]; var myLoop = slowLoop(myArray, (itm, idx, cb)=>{ setTimeout(()=>{ console.log(`doing something with ${itm} which is item number ${idx} in the array`); // call cb when finished cb(); }, 1000); }); // when it's done.... myLoop.then(()=>{ console.log("All done looping"); }); /** * Execute the loopBody function once for each item in the items array, * waiting for the done function (which is passed into the loopBody function) * to be called before proceeding to the next item in the array. * @param {Array} items - The array of items to iterate through * @param {Function} loopBody - A function to execute on each item in the array. * This function is passed 3 arguments - * 1. The item in the current iteration, * 2. The index of the item in the array, * 3. A function to be called when the iteration may continue. * @returns {Promise} - A promise that is resolved when all the items in the * in the array have been iterated through. */ function slowLoop(items, loopBody) { return new Promise(f => { done = arguments[2] || f; idx = arguments[3] || 0; let cb = items[idx + 1] ? () => slowLoop(items, loopBody, done, idx + 1) : done; loopBody(items[idx], idx, cb); }); }