Question

我在Javascript中有一个像这样的数组

var myData = [{"UserName":"Foo", "info", {...} }, {"UserName":"Foo1", "info", {...} }];

现在我需要显示一个窗口（模态），显示用户名和 info

中包含的信息

但我需要为 myData 中的每个项目显示一个窗口实例，理想情况下使用这样的代码

function ShowModalWindow() {
  var myData = [{"UserName":"Foo", "info", {...} }, {"UserName":"Foo1", "info", {...} }];

  myData.forEach(function (item) {
    window.ShowModal(item);
    // execution blocked until the window is closed
    .
    .
    .
  }
}

但是我正在阅读有关Javascript执行阻止的内容，而且似乎无法实现。

问题是如何在不阻止代码执行的情况下显示多个窗口实例？

PD：我正在使用创建窗口的插件。我创建窗口的方式在这里并不重要。该窗口以非阻塞方式创建。

Answer 1

假设您的插件功能为您提供Promise，您可以使用async library（特别是waterfall method）：

var myData = [{"UserName":"Foo", "info", {...} }, {"UserName":"Foo1", "info", {...} }];

// we create a array of functions
var modals = myData.map(function(item) {
  // we return a function that will load ShowModal
  // and call the callback function when it is closed
  return function(callback) {
    window.ShowModal(item).then(function(result) {
      // the Modal is closed, we call the callback 
      // with first argument null
      callback(null, result)
    }).catch(function(err) {
      // the Modal has been dismissed
      // we stop the execution by calling the callback
      // with a first argument
      callback(err)
    });
  }  
});

async.waterfall(modals,function (err, result) {
  if(err) return console.error(err)
  console.log('All done')
  console.log(result)
}

请注意，如果ShowModal未返回承诺，您可以使用async.asyncify()方法使其异步：

async.asyncify(window.ShowModal(item)).then( function() {/*.. */})

使用非阻塞算法多次显示模态窗口

1 个答案: