javascript - 清理 JavaScript 代码以避免嵌套

Question

我有一堆链接的 jquery 事件，使用 .then 来确保正确的执行顺序:

function openWindow(book_section_id) {
    //do some stuff
    return newWindow
}

$(document).ready(function() {
    newWindow = openWindow(5);
    newWindow.onload = function(){
    $.when(newWindow.getStudentHighlightsAjax).done(function(){
    getText(5);
})  
.then(function() {
    newWindow.close();
    newWindow = openWindow(12);
    newWindow.onload = function() {
        $.when(newWindow.getStudentHighlightsAjax).done(function() {
            getText(12);
        }).then(function() {
            newWindow.close();
        });};
    });};
});

在我的最后一条链中，我将有大约 20 或 30 个“then”，我想通过创建一个将执行的函数来清理事情:

newWindow = openWindow(x);
newWindow.onload = function() {
$.when(newWindow.getStudentHighlightsAjax).done(function() {
    getText(x);
});

问题是每个后续的 .then 都在前一个 onload 事件中“包装”(请注意，“{”直到我的脚本结束才关闭。我的问题是是否有办法重新编写代码，以便我可以得到更多类似的内容:

$(document).ready(function() {
    process(5).then(process(12);
});

Answer 1

只需立即将 onload 转换为 Promise:

function whenLoaded(newWindow) {
  if (newWindow['-onload-promise']) 
    return newWindow['-onload-promise'];
  var d = $.Deferred()
  newWindow.onload = d.resolve.bind(d, newWindow);
  return newWindow['-onload-promise'] = d.promise();
}

现在您可以在您的 promise 链中使用它。

编辑:ready() 不返回 promise ，所以我必须嵌套该部分。

$(document).ready(function() {
  whenLoaded(openWindow(5)).then(function(newWindow) {
    return $.when(newWindow.getStudentHighlightsAjax);
  }).then(function() {
    // ...
  })
})