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个“thens”，我想通过创建一个将执行的函数来清理：

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转换为承诺：

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

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

编辑：ready（）没有返回一个承诺，所以我不得不嵌套那个部分。

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

Answer 2

你不能使用像AsyncJS（https://github.com/caolan/async）或JSDeferred（http://cho45.stfuawsc.com/jsdeferred/）之类的库，并使用类似示例中的内容：

async.series([
function(){ ... },
function(){ ... }
]);

确保所有呼叫都按顺序执行？

清理javascript代码以避免嵌套

2 个答案: