非异步POST调用

Question

I have the following which works and returns data:

function ScrollToBottom() {
    $.ajax({
        async: false,
        type: "POST",
        url: "index.aspx/function",
        data: 'val,val2,val3',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {
            alert('An error has occured, please refresh the page.');
        },
        error: function (response) {
            alert('An error has occured, please refresh the page.');
        }
    });
}

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
}

The problem currently comes in firefox as the async: false doesn't fly there. The above function is called if the user has scrolled all the way to the bottom of the page.

What happens in Firefox is the user scrolls, the function is called several times and instead of say 5 different sets of data, the user sees the same set of data 5 times over.

What would be my alternative to the above call be, so it wouldn't be async and plain old synchronous "wait till the previous bit is done" code ?

Answer 1

Try to set a flag if it is loading:

var loading = false;
function ScrollToBottom() {
    if(loading) return;
    loading = true;
    $.ajax({
        async: false,
        type: "POST",
        url: "index.aspx/function",
        data: 'val,val2,val3',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {

            alert('An error has occured, please refresh the page.');
        },
        error: function (response) {
            alert('An error has occured, please refresh the page.');   
        },
        always: function(response){
            loading = false;
        }
    });
}

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
}