Ajax 链式完成事件 (jQuery)

Question

假设我有一个函数如下：

function load_form() {
    $( '.result' ).load( '/form.html', function() {
        console.log( 'form loaded.' );
    } );
}

这将通过 ajax 加载表单。（实际上它会根据所选的收音机加载不同的表单，然后在加载后在不同的元素上设置事件）

所以在我写的另一部分代码中：

load_form();

没问题！然后我在其他地方写了另一个 load_form()...再次没问题。（基本上是通过表单添加数据时）

再往下，我需要加载表单，但之后会做一些不同的事情：（例如，在我点击加载表单之后，我需要用数据填充它）

load_form();
//afterwards I need it to run this function
populate_form();

我想我会按如下方式链接它：

function load_form() {
    return $( '.result' ).load( '/form.html', function() {
        console.log( 'form loaded.' );
    } );
}

$promise = load_form();
$.when( $promise ).done( populate_form );

...但这并不像我希望的那样有效。而不是运行 console.log 然后 populate_form() 它运行 populate_form() 然后 console.log。（在这种情况下这不是问题，但在实际代码中顺序很重要）

我也试过：

$( document ).ajaxComplete( populate_form );

然而，这并不奏效，因为它每次都运行然后当我尝试按如下方式取消它时：

$( document ).ajaxComplete( function() {
    populate_form();
    $(document).unbind( "ajaxComplete" );
});

关于如何根据每个请求向已完成的 ajax 调用添加特定函数有什么想法吗？

谢谢吉姆

Answer 1

您可以 load_form 进行回调并在加载完成后调用它。

function load_form(callback) {
    $( '.result' ).load( '/form.html', function() {
        console.log( 'form loaded.' );
        if(callback)
            callback();
    } );
}

load_form(populate_form);

这还允许您像这样将参数传递给您的回调：

user = {username : 'Jim Win'};
load_form(function() {
    populate_form(user);
});

Ajax 链式完成事件 (jQuery)

Ajax chained completion event (jQuery)

ajax

jquery