ajaxStart-更改显示不总是工作

注:我用注释替换了一些代码,使其更简短、更可读

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

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

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

当你点击submit按钮时,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 );
        }
    });
}

重要提示:调用这三个函数中的任何一个时,日志中都不会出现错误。三人都完成了分配给他们的任务,没有任何问题。