JQuery Deferred：同步等待结果

Question

我有一个当用户离开页面时调用的函数。此功能可确保始终保存页面上待处理的更改。如果保存失败，可以通过此方法返回

false

来取消导航。这是应用程序中的现有代码，无法更改以与回调一起使用（旧版）。

此方法用于导航元素的 OnClick 处理程序（我知道，遗留）：

<a href="link" onclick="return saveOnNavigation()">link</a>

现在我有了这个新函数，它使用 jQuery.Deferred 来保存页面上的更改。我想从上述方法调用此功能，但由于该方法的同步性质，我无法使用回调。

在这种情况下我如何“等待” jQuery.Deferred 的结果？

这里有一些伪代码（作为小提琴）：

function saveAll() {
    var d = $.Deferred();

    //Do work asynchronously and cann d.resolve(true);
    setTimeout(function(){
        console.log("everything is saved.")
        d.resolve(true);
    }, 1000);

  return d;
}

function saveOnNavigation() {
    if(saveAll()){
        console.log("saved and navigate to next page.");
        return true;
    }
    console.log("failed to save. Staying on page");
    return false;
}

var x = saveOnNavigation();
if(x === true) {
    console.log("navigating to next page");
}

现在的输出是：

saved and navigate to next page.
navigating to next page
everything is saved.

虽然应该是：

everything is saved.
saved and navigate to next page.
navigating to next page

Answer 1

您还没有展示如何调用这些函数，但如果它归结为

onbeforeunload

或

onunload

处理程序，恐怕您无法执行您所要求的操作。这些都不能等待异步过程完成，也不能取消（用户除外）。 请参阅下文，您也许可以使用这些链接执行某些操作。

单独：在最近的 jQuery 中，无法使

$.Deferred

对

then

（

done

等）处理程序的回调同步（即使在旧的 jQuery 中，如果

Deferred

没有），也没有办法同步。在您致电

then

等之前已经解决了）。 jQuery 的

Deferred

已更新为符合 Promises/A+ 规范，该规范要求对

then

和类似回调 的调用必须 是异步的。 （在更新为符合该规范之前，

Deferred

是混乱的：如果它已经解决了，它会同步调用回调，但如果还没有解决，那么它当然是异步的。Promises/A+ 不会'不允许这种混乱的行为。）

---

您现在已经说过您正在像这样调用这些函数：

<a href="link" onclick="saveOnNavigation">link</a>

我想它一定是这样的，

()

<a href="link" onclick="saveOnNavigation()">link</a>

如果您可以将其更改为：

<a href="link" onclick="return saveOnNavigation(this, event)">link</a>

然后您可以继续在该处理程序中进行异步操作，方法是取消默认导航，然后在完成后进行导航：

function saveOnNavigation(link, event) {
    // Start the async operation
    startAsynchronousOperation().then(function(saved) {
        // Now it's finished (later)
        if (saved){
            // All good, do the navigation
            console.log("saved and navigate to next page.");
            location = link.href;
        } else {
            // Not good, don't navigate
            console.log("failed to save. Staying on page");
        }
    });

    // Cancel the click (belt-and-braces)
    if (event.preventDefault) {
        event.preventDefault();
    }
    return false;
}

现场示例：

var clicks = 0;

function startAsynchronousOperation() {
  var d = $.Deferred();
  setTimeout(function() { // Emulate an async op
    if (++clicks == 1) {
      d.resolve(false);   // disallow
    } else {
      d.resolve(true);    // allow
    }
  }, 500);
  return d.promise();
}
function saveOnNavigation(link, event) {
  // Start the async operation
  startAsynchronousOperation().then(function(saved) {
    // Now it's finished (later)
    if (saved) {
      // All good, do the navigation
      console.log("saved and navigate to next page.");
      location = link.href;
    } else {
      // Not good, don't navigate
      console.log("failed to save. Staying on page");
    }
  });

  // Cancel the click (belt-and-braces)
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}

<a href="http://example.com" onclick="return saveOnNavigation(this, event)">The first click on this link will be stopped; the second one will be allowed.</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意： 如果用户右键单击链接并从菜单中选择选项之一（例如“在新选项卡中打开”），则不会调用您的

onclick

处理程序，并且上面的任何代码都不会工作。但我猜因为这不会使当前窗口离开页面，所以没关系。

如果您无法更改页面的标记，我们仍然可以做到。 :-) 我们只需要在页面加载后运行一些代码，将那些老式的属性样式事件处理程序转换为现代事件处理程序：

$('a[onclick*="saveOnNavigation"]')
    .attr("onclick", "")
    .on("click", saveOnNavigation);

...我们将

saveOnNavigation

更改为：

function saveOnNavigation(event) {
  var link = this;

  // Cancel the click
  event.preventDefault();

  // Start the async operation
  startAsynchronousOperation().then(function(saved) {
    // Now it's finished (later)
    if (saved) {
      // All good, do the navigation
      console.log("saved and navigate to next page.");
      location = link.href;
    } else {
      // Not good, don't navigate
      console.log("failed to save. Staying on page");
    }
  });
}

示例：

var clicks = 0;

function startAsynchronousOperation() {
  var d = $.Deferred();
  setTimeout(function() { // Emulate an async op
    if (++clicks == 1) {
      d.resolve(false);   // disallow
    } else {
      d.resolve(true);    // allow
    }
  }, 500);
  return d.promise();
}
function saveOnNavigation(event) {
  var link = this;

  // Cancel the click
  event.preventDefault();

  // Start the async operation
  startAsynchronousOperation().then(function(saved) {
    // Now it's finished (later)
    if (saved) {
      // All good, do the navigation
      console.log("saved and navigate to next page.");
      location = link.href;
    } else {
      // Not good, don't navigate
      console.log("failed to save. Staying on page");
    }
  });
}
$(document).ready(function() { // Don't need this if the script tag is at the end, just before </body>
    $('a[onclick*="saveOnNavigation"]')
        .attr("onclick", "")
        .on("click", saveOnNavigation);
});

<a href="http://example.com" onclick="saveOnNavigation()">The first click on this link will be stopped; the second one will be allowed.</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

尝试 jquery 的 $.when().then()

var d = $.Deferred();
var myvariable = false;
$(document).ready(function(){
    saveAll()
})

function saveAll() {
    //var d = $.Deferred();

    //Do work asynchronously and cann d.resolve(true);
  myvariable = setTimeout(function(){
    console.log("everything is saved.")
    d.resolve();
    myvariable = true;

  }, 1000);


}
$.when(d).then(function(){
    var x = saveOnNavigation();
if(x === true) {
    console.log("navigating to next page");
}
})



function saveOnNavigation() {
    if(myvariable){
    console.log("saved and navigate to next page.");
    return true;
  }
  console.log("failed to save. Staying on page");
  return false;
}

//