具有一个回调jQuery的多个函数 - 没有setTimeout

时间:2015-01-13 15:14:56

标签: javascript jquery ajax callback conditional-statements

问题:在执行$(#myid).load()形式的三个函数后我需要一个回调但是如果不使用setTimeout()

我就无法工作

虽然我对jQuery promises / deferreds的了解是慈善的,有限的但我认为解决方案是简单使用jQuery的$.when().then()功能,如

所宣传的那样。

Javascript Callbackmultiple 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()

0 个答案:

没有答案