问题:在执行$(#myid).load()
形式的三个函数后我需要一个回调但是如果不使用setTimeout()
虽然我对jQuery promises / deferreds的了解是慈善的,有限的但我认为解决方案是简单使用jQuery的$.when().then()
功能,如
Javascript Callback和multiple ajax Request single callback jQuery
这是我的代码:
$.when(
SetSelect('AJAXSetSelect.asp',valTable,'RECALBodySum'),
SetSelect('AJAXSetSelect.asp',valTable,'RECALCol1'),
SetSelect('AJAXSetSelect.asp',valTable,'RECALRow1')
)
.then(
function() { // success
setTimeout(function(){
$("#OutputAdvanced").load("/_RECAL/Modes/AdvancedCrosstab.asp",
{
"RECALtable":$('#RECALtable').children().val(),
"RECALCol1":$('#RECALCol1').children().val(),
"RECALRow1":$('#RECALRow1').children().val(),
"RECALBodySum":$('#RECALBodySum').children().val()
}
); // close load
}, 500) // why do we need 500 ms delay?
, // finished "success" fn, now "failure fn
function () {SF('failure'); // this is actually a simple alert
} // failure
); // close then
总之,代码生成三个AJAX调用,每个调用填充一个SELECT框。当它们完成时,它会填充区域#OutputAdvanced
,具体取决于三个SELECT的值。
我原以为$.when().then()
构造的重点是then()
中的代码只在when()
完成后运行。我不应该用setTimeout
引入延迟。
我已经构建了一个jsFiddle,但这只是一个同步的例子,并不适合我。
我也知道像asyncJS这样的框架,但我相信它超出了我想要实现的目标。它在我的具体示例中不起作用,我真的想要了解我缺少的基于我的专业知识 - 而不仅仅是“解决问题” - 我使用{{1}做到了这一点}。
更新1月14日 - 以下研究: api.jquery.com/jQuery.when/上的最后一个jQuery示例如下:
setTimeout
我天真的解释是,在$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
.then( myFunc, myFailure );
内包含函数确保不需要延期声明。该页面上的前一个示例表明需要更多:
when()
但是d1和d2实际上做什么?我如何在现实世界中使用它?
来自stackoverflow.com/questions/15018931/jquery-custom-deferred-functions的jquery自定义延迟函数我认为我应该按照以下步骤进行操作(使用3行新代码):
var d1 = new $.Deferred();
var d2 = new $.Deferred();
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 ); // "Fish"
console.log( v2 ); // "Pizza"
});
d1.resolve("Fish");
d2.resolve("Pizza");
原始示例现在运行三个函数,如function PopulateTableSelect() {
return $.Deferred(function() { // AKHupdate2015/01/14
$('#RECALtable').load('/_RECAL/AJAX/AJAXSetSelect.asp',
{"RECALsubmode":'Aggregate',"RECALtable":'Risks',"RECALCol1Row1Id":'RECALtable'});
this.resolve(); // AKHupdate2015/01/14
}) // AKHupdate2015/01/14
}
。
但我似乎还需要PopulateTableSelect()
延迟500毫秒;如果没有这个,服务器就不会获得SELECT值,setTimeout()
会导致服务器错误。
更新2月14日 - 来自@hindmost的评论:
为了避免这种情况成为“讨论”而不是问题,如果我收到完整答案,我会将其删除
评论中的建议是使用load()
而不是ajax()
来避免此问题。这似乎也是在looseideas.co.uk/using-ajax-rather-than-jquery-load(没有足够的代表发布完整链接)的建议。事实证明,这种松散的方法太过简洁,无法解释。但这里是我的旧功能和新功能(省略最少代码):
我使用load()
的旧代码是:
load()
虽然有效,但只能使用function SetSelect(AJAXfile, Table, IdToChange){
$('#' + IdToChange).load(
"/_RECAL/AJAX/" + AJAXfile, // URL
{ // data
"RECALsubmode":$('#RECALsubmode').children().val(),
// more data omitted
"RECALCol1Row1Id":IdToChange
}
); // close load
} // end SetSelect function
我使用setTimeout()
的新代码是:
ajax()
没有工作;没有任何内容被加载到id中,我得到一个控制台消息“Uncaught TypeError:undefined不是一个函数”。
最后,我还查看了stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call,但与我的通用问题和jQuery末尾的简单代码示例进行了比较function SetSelect(AJAXfile, Table, IdToChange){
$('#' + IdToChange).ajax({
type: "post",
url: "/_RECAL/AJAX/" + AJAXfile, // URL
data: {
"RECALsubmode":$('#RECALsubmode').children().val(),
// more data omitted
"RECALCol1Row1Id":IdToChange
},
dataType: "html" // attempt to prepare for data to be passed back
},function() {$('#' + IdToChange).html(responseText);} // callback is responseText right?
); // close .ajax
} // end SetSelect function
文档 - 见下文 - 这看起来非常复杂。
when()