我正在尝试一个代码
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);
它只是警告“开始”并终止。可以在http://jsfiddle.net/XQFyq/2/找到一个工作示例。我究竟做错了什么?
Test不是递归对象,因此它没有方法.then()。.when() 是 一个延迟对象,因此在您调用时为何起作用.when()。
Test
.then()
.when()
您的$.ajax()调用 是 一个延迟对象,因此,如果您将该'Test.start()方法作为方法的一部分返回,则可以添加.then()回调 ( 请参见此处的示例),.then()一旦ajax调用已解决(即返回了其数据 ) ,则将调用该回调,但这不是我认为不是真正正确地使用了延迟对象。我相信以下内容是如何使用的:
$.ajax()
'Test.start()
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)..
showDiv()
showDiv(data)
这里是你如何可以创建自己的另一个例子递延对象,而不是依赖于递延对象的的.ajax()呼叫。这与您的原始示例有点接近- 例如,如果您希望看到它失败,请http://DONTsearch.twitter.com/search.json 在此处 将URL更改为 example :
.ajax()
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()回调。
.fail()
error:.......
error: drf.reject
至于您看到立即ShowMoreCode()运行的原因是,这些.then()调用是回调,如果您将其传递给函数,则该函数的字符串表示形式如下:.then(ShowDiv)一旦轮到回调,回调将查找具有该名称的函数。如果将调用传递给函数.then(someMoreCode('Ashish')),它将运行该函数。尝试一下,更改.then(showDiv)为,.then(showDiv())您将在代码运行后立即注意到,它将显示中的代码showDiv()。
ShowMoreCode()
.then(ShowDiv)
.then(someMoreCode('Ashish'))
.then(showDiv)
.then(showDiv())
如果更改.then(ShowMoreCode('Ashish'))为.then(ShowMoreCode),则可以从$.ajax()呼叫中访问返回的数据。像这样:
.then(ShowMoreCode('Ashish'))
.then(ShowMoreCode)
function someMoreCode(name) { alert('Hello ' + name.query); }
在这里看看:工作与不工作.fail()