jQuery Deferred不起作用

Question

jQuery Deferred不起作用

6

我正在尝试一段代码：

function search(query) {
    var dfr = $.Deferred();
    $.ajax({
        url: "http://search.twitter.com/search.json",
        data: {
            q: query
        },
        dataType: 'jsonp',
        success: dfr.resolve
    });
    return dfr.promise();
}

Test = {
    start: function(){
        alert("Starting");
    }
};

function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

$.when(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv);

这个代码按预期工作。但是，当我这样写时：

Test.start()
    .then(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv);

它只会弹出“Starting”并终止。可以在http://jsfiddle.net/XQFyq/2/找到一个工作示例。我做错了什么吗？

- Ashish

start() 函数没有返回任何东西，所以我猜你不能在这里使用链式调用。 - pimvdb

即使将搜索测试并从搜索开始也无济于事。 - Ashish

“Test” 没有相应的方法。你看过 Firebug/Web Inspector 吗？ - kirilloid

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scoobler · Accepted Answer

Test不是一个延迟对象，因此它没有.then()方法。 .when() 是一个延迟对象，所以当您调用.when()时，它会起作用。

您的$.ajax()调用是一个延迟对象，因此，如果您将其作为'Test.start()方法的一部分返回，则可以添加.then()回调函数（请参见此处示例），.then()回调函数将在ajax调用已解析，即已返回其数据后调用，但我认为这并不是使用deferred对象的正确方式。以下是我认为更符合其预期使用方式的示例：

function searchTwitter(query){
    $.ajax({
            url: "http://search.twitter.com/search.json",
            data: {
                q: query
            },
            dataType: 'jsonp',
            success: function(data){return data;}
        })
        .then(gotresults)
        .then(showDiv)
        .fail(showFailDiv);
};

function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

function showFailDiv() {
    $('<div />').html("Results <b>NOT</b> received").appendTo('body');
}

// Starting can be done with a click:

$("#searchTwitter").click(function(){
   searchTwitter($("#searchName").val()); 
});

// OR a static call:
searchTwitter("ashishnjain");

点击这里查看它的工作原理。

如果您希望在例如showDiv()中返回数据，请将其更改为showDiv(data).....

这是另一个示例，演示如何创建自己的延迟对象，而不是依赖于.ajax()调用的延迟对象。这与您的原始示例更接近-例如，如果您想要查看失败情况，请将url更改为http://DONTsearch.twitter.com/search.json 此处有示例：

var dfr;

function search(query) {
    $.ajax({
        url: "http://search.twitter.com/search.json",
        data: {
            q: query
        },
        dataType: 'jsonp',
        success: function(data){dfr.resolve(data);},
        error:  function(){dfr.reject();}
    });
}

Test = {
    start: function(){
        dfr = $.Deferred();
        alert("Starting");
        return dfr.promise();        
    }
};


function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

function showFailDiv() {
    $('<div />').html("Results <b>NOT</b> received").appendTo('body');
}

Test.start()
    .then(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv)
    .fail(showFailDiv);

针对评论的更新：

在您的第11版中，您没有告知失败的延迟对象，因此它将永远不会调用.fail()回调函数。为了纠正这个问题，如果.fail() (error:.......)出现错误，请使用ajax解释来通知延迟对象发生错误error: drf.reject - 这将运行.fail()回调。

至于你看到的ShowMoreCode()直接运行的原因是，.then()调用是回调函数，如果你传递一个函数的字符串表示形式，比如：.then(ShowDiv)，一旦轮到它的回调函数，它将寻找该名称的函数。如果你传递一个函数的调用.then(someMoreCode('Ashish'))，它将运行该函数。试试把.then(showDiv)改成.then(showDiv())，你会注意到代码运行后，它将显示来自showDiv()的代码。

如果你把.then(ShowMoreCode('Ashish'))改成.then(ShowMoreCode)，你可以访问$.ajax()调用返回的数据。像这样：

function someMoreCode(name) {
    alert('Hello ' + name.query);
}

请看这里：运行中的和.fail()未能正常工作的