jQuery Ajax事件绑定

Question

I am using the https://github.com/ehynds/jquery-idle-timeout to produce a Mint style idle timer which performs an Ajax call to a 'keep-alive' page.

I also have a piece of Javascript for Ajax form submits that pops up a 'Please wait' message to alert the user that activity is occurring though the pages isn't loading.

For some reason the toggleAjaxLoader() function is getting bound to the ajax:before and ajax:complete events each time the keep alive page is polled. I do not want this as it is confusion to the user. Why would this be binding to the idletimeout and/or how can I drill into what is happening?

Loading animation:

// Toggles our animated ajax loader image
function toggleAjaxLoader() {
  jQuery('#ajax_loader').toggle();
}

Idle timeout:

/*
 * Inactivity notifier and auto logout
 */
jQuery(function(){
    var redirectToURL = getAbsoluteUrl('/logout/auto=true'); // URL to relocate the user to once they have timed out
    var keepAlive = getAbsoluteUrl('/keep-alive');

    if (jQuery("#idletimeout").length) {
        $.idleTimeout('#idletimeout', '#idletimeout a', {
            idleAfter: 2700, // 45 minutes
            warningLength: 60, // number of seconds to wait before redirecting the user
            keepAliveURL: keepAlive,
            AJAXTimeout: 2500,
            pollingInterval: 5, // 60
            expiredMessage: 'Your session has expired.  You are being logged out for security reasons.', // message to show user when the countdown reaches 0
            onTimeout: function(){
                $(this).slideUp();
                window.location.replace(redirectToURL);
            },
            onIdle: function(){
                $(this).slideDown(); // show the warning bar
            },
            onCountdown: function( counter ){
                $(this).find("span").html( counter ); // update the counter
            },
            onResume: function(){
                $(this).slideUp(); // hide the warning bar
                // Tums.bump_tums_session(session[:user].session['sessionGuid']);
            }
        });
    };
});

Answer 1

I believe I found my answer, it is due to jQuery's global ajax event handlers, which by default the setting is set to true. I set this to false it it appears to be working as expected.

$.ajaxSetup({
   global: false
});