javascript - 如何使用JQuery $ .when

我已经看过并尝试了$ .when和$ .Deferred的六个变体，但是我无法使其正常工作。以下代码应执行以下操作：

1.）用户单击登录，调用登录功能。

2.）登录调用renderNavbar，它需要从服务器执行回调。

3.）在renderNavbar检索数据并在renderNavbar设置#navbar的html属性之后，登录应调用toggleLoginState。

实际发生的情况是登录调用renderNavbar，然后立即调用toggleLoginState，而无需等待renderNavbar内部的回调。我该如何解决？？ （BTW renderNavbar和toggleLoginState在代码的其他位置彼此独立地调用。一个不能直接调用另一个。）

var app = {

this.login = function () {
    $.when(app.renderNavbar()).done(app.toggleLoginState(1));  // wrong does not work


}


this.renderNavbar = function ()
{
    return $.when($.get('/Home/Navbar')).done(function (data) {
        $('#navbar').html(data);  // this line must complete before the call the to toggleLoginState is made
    });
}

this.toggleLoginState = function (state)
{
    if (state == 1) {// yada}  // this line should execute after #navbar is set
}

}

最佳答案

无需在代码中的任何地方使用$.when。 $.get返回一个可以直接调用done的承诺。您只是重新包装了这个承诺。从renderNavbar返回相同的承诺，然后用$.when再次包装它。

实际的根本问题是，您没有将回调函数传递给done，而是只是立即调用代码并将返回值传递给done。

您的代码应如下所示，并将函数传递给done：

this.renderNavbar = function () {
    return $.get('/Home/Navbar').done(function (data) {
        $('#navbar').html(data);  // this line must complete before the call the to toggleLoginState is made
    });
}


this.login = function () {
    app.renderNavbar().done(function () {
      app.toggleLoginState(1));
    });
}

区别在于您正在执行此操作。

// invoke doSomething() immediately, pass return value to done
$(...).done(doSomething())

当您需要这样做时：

// give done a function to invoke in the future
$(...).done(function () { doSomething() });

关于javascript - 如何使用JQuery $ .when，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26320342/