变量在使用异步AJAX(使用jQuery)请求加载数据时被覆盖

Variable overwritten when using asynchronous AJAX (using jQuery) request to load data

本文关键字:加载 请求 数据 覆盖 jQuery 使用 异步 AJAX 变量      更新时间:2023-09-26

我有以下代码,用于在需要时提前一个月加载有关用户付款的信息。该函数工作时,我等待每个月加载,但它失败时,多个ajax请求正在运行。基本上重复的数据被添加到我的monthData数组,这意味着loaddpaymentmonth正在被覆盖每个函数调用。我想异步加载数据,有什么想法吗?

这行不通:

var monthData=[]; 
function loadMonth(monthToLoad,curMonth){
    $("#paymentContent").find(".loader").remove();
    var monthToGet;
    switch(monthToLoad){
        case "Next": monthToGet=monthData.length-curMonth+1;
        break;
        case "Prev": monthToGet=-curMonth-1;
        break;
        case "This": monthToGet=currentMonthPointer-curMonth;
        break;
    }
    var loadedPaymentMonth=new PaymentMonth();
    if(monthToGet<0){
        currentMonthPointer+=1;
        monthData.unshift(loadedPaymentMonth);
    }
    else{
        monthData.push(loadedPaymentMonth);
    }
    $.getJSON(host+"GetDataForMonth.aspx?StartMonth="+monthToGet,function(data){
        loadedPaymentMonth.setMonthData(data.monthData,data.month,data.year);
        if($("#paymentsContent").find(".loader").remove().length>0){
            loadedPaymentMonth.createPaymentRowsForMonth();
        }
    }).error(function(){
        $("#paymentsContent").find(".loader").remove();
    });
}

这样做:

function loadMonth(monthToLoad,curMonth){
    $("#paymentContent").find(".loader").remove();
    var monthToGet;
    switch(monthToLoad){
        case "Next": monthToGet=monthData.length-curMonth+1;
        break;
        case "Prev": monthToGet=-curMonth-1;
        break;
        case "This": monthToGet=currentMonthPointer-curMonth;
        break;
    }
    var loadedPaymentMonth=new PaymentMonth();
    if(monthToGet<0){
        currentMonthPointer+=1;
        monthData.unshift(loadedPaymentMonth);
    }
    else{
        monthData.push(loadedPaymentMonth);
    }
    $.ajax({
        url:host+"GetDataForMonth.aspx?StartMonth="+monthToGet,
        async:false,
        dataType:"json",
        success:function(data){
        loadedPaymentMonth.setMonthData(data.monthData,data.month,data.year);
        if($("#paymentsContent").find(".loader").remove().length>0){
            loadedPaymentMonth.createPaymentRowsForMonth();
        }
        }
    }).error(function(){
        $("#paymentsContent").find(".loader").remove();
    });
}

所以我的代码检查一个月是否已经加载,如果没有,它就加载它。然而,我并不是在处理这个案例。因为paymentmonth是在AJAX启动之前添加的,所以我需要用一个新对象替换旧的paymentmonth对象(如果新请求在旧请求之前完成,仅使用旧的paymentmonth对象也可能导致同步问题)。所以这:

if(monthToGet<0){
    currentMonthPointer+=1;
    monthData.unshift(loadedPaymentMonth);
}
else{
    monthData.push(loadedPaymentMonth);
}

成为:

var loadedPaymentMonth=new PaymentMonth();
if(monthToLoad!="This"){
    if(monthToGet<0){
        currentMonthPointer+=1;
        monthData.unshift(loadedPaymentMonth);
    }
    else{
        monthData.push(loadedPaymentMonth);
    }
}
else{
    monthData[currentMonthPointer]=loadedPaymentMonth;
}