ajaxStart - 更改显示并不总是有效

注意：我用注释替换了一些代码，使其更短、更易读

我正在使用 Javascript (Ajax) 和 PHP (Laravel)。我遇到了困境！调用 ajax 函数时，我有两个侦听器在 ajax 处理时显示加载符号，然后在完成后再次隐藏它。

$( document ).ajaxStart( function() {
    $( '#loading' ).css( 'display', 'block' );
} );

$( document ).ajaxStop( function() {
    $( '#loading' ).css( 'display', '' );
} );

当您单击提交按钮时，HTML onclick 表示转到此工作正常的函数：

function submit( button ) {
    var table = $( button ).closest( '.popup' ).find( 'table:first' );

    var verified = verifyTable( table );

    if ( verified == -1 ) {
        return -1;
    }

    if ( table.hasClass( 'campaigns' ) ) {
        campaign = table.find( '.campaign:first' );

        submitNewCampaign( campaign );
    } else if ( table.hasClass( 'groups' ) ) {
        groups = table.find( 'tr.group' );

        for ( var i = 0; i < groups.length; ++i ) {
            submitNewGroup( groups.eq( i ) );
        }
    } else if ( table.hasClass( 'keywords' ) ) {
        keywords = table.find( 'tr.keyword' );

        for ( var i = 0; i < keywords.length; ++i ) {
            submitNewKeyword( keywords.eq( i ) );
        }
    }

    closePopup();
}

如果从那里您被发送到 submitNewCampaign()，则一切正常。

function submitNewCampaign( campaign ) {
    // Set campaign variables

    $.ajax({
        url : '/ajax/addCampaign',
        type : 'POST',
        data : { // set campaign data },
        success : function( result ) {
            // get all groups in campaigns and loop through
            for ( var i = 0; i < groups.length; ++i ) {
                // set group variables

                $.ajax({
                    url : '/ajax/addGroup',
                    type : 'POST',
                    async : false,
                    data : { // set group data },
                    success : function( result ) {
                        // get all keywords in group and loop
                        for ( var i = 0; i < keywords.length; i++ ) {
                            // set keyword variables 

                            $.ajax({
                                url : '/ajax/addKeyword',
                                type : 'POST',
                                async : false,
                                data : { // set keyword data },
                                success : function( result ) { // done },
                                error : function( result ) {
                                    alert( "error adding new keyword (name - " + keyword_name + ")");
                                    console.log( result );
                                }
                                );
                        }
                    },
                    error : function( result ) {
                        alert( "error adding new group (name - " + group_name + ")" );
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            alert( "error adding new campaign (name - " + campaign_name + "): " + JSON.parse( xhr.responseText ) );
        }
    });
}

但是，如果您发送到 submitNewGroup() 或 submitNewKeyword()，加载图像不会出现。

function submitNewGroup ( group ) {
    // set group variables

    $.ajax({
        url : '/ajax/addGroup',
        type : 'POST',
        async : false,
        data : { // set group data },
        success : function( result ) {
            // get all keywords in group and loop

            for ( var i = 0; i < keywords.length; ++i ) {
                // set all keyword variables 

                $.ajax({
                    url : '/ajax/addKeyword',
                    type : 'POST',
                    async : false,
                    data : { // set all keyword data },
                    success : function( result ) { // done },
                    error : function( result ) {
                        console.log( result );
                    }
                });
            }
        },
        error : function( result ) {
            console.log( result );
        }
    });
}

function submitNewKeyword( keyword ) {
    // set keyword variables
    $.ajax({
        url : '/ajax/addKeyword',
        type : 'POST',
        async : false,
        data : { // set keyword data },
        success : function( result ) { //done },
        error : function( result ) {
            console.log( result );
        }
    });
}

重要提示：调用这三个函数中的任何一个时，日志中都不会出现错误。三人都顺利完成了分配的任务。