具有相同回调但不同参数的多个同时ajax请求

Question

我正在开发基于网格的内容页面（如Google地图网格，您需要时加载单元格）。

要做到这一点，我有一个带坐标的已定义网格，当要显示一个单元格时，我发出一个ajax请求来获取特定内容并将它们插入到单元格中。

当我有多个单元格要在同一个视口中输入时，我必须执行多个ajax调用，并使用回调函数来填充单元格。

理想情况下，我会以args的形式传递要填充的单元格的坐标

//Where serviceURI is the url to the endpoint
//gridState.x is the X coordinate
//gridState.y is the Y coordinate

getData(serviceURI, gridState.x, gridState.y);

这是我的功能

    var getData = function(url , dayId, row) {

        if (window.XMLHttpRequest) {
             httpRequest = new XMLHttpRequest();
        }else if (window.ActiveXObject) {
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
                try {
                      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e) {}
            }
        }

        if (!httpRequest) {
              console.log('Could not create XMLHTTP instance');
              return false;
        }
        httpRequest.onreadystatechange = (function(d,r){
            return function(){
                if (httpRequest.readyState === 4) {
                  if (httpRequest.status === 200) {

                    //   FUNCTION WHERE THE CELL WILL BE FILLED
                    populate(JSON.parse(httpRequest.responseText), d, r);

                    return true;
                  } else {
                    console.log('There was a problem with the request.');
                      return false;
                  }
                }
            }
        })(dayId, row);
        httpRequest.open('GET', url);
        httpRequest.send();
    }

问题在于，在第一个呼叫的响应到来之前，其他的ajax请求被发出，并且传递给回调函数的args是最新调用的args。

如何在不被覆盖的情况下将正确的args传递给回调对我来说是一个谜！

如果有人有光照在我身上，我会非常感激！

已编辑以包含populate()功能：

    var populate = function(obj, dayId, row){
        var created = createRow(row),
        channels = obj.gridtv.channels,
        dayCont = document.getElementById('day'+dayId),
        cell = dayCont.getElementsByClassName('inner-cell'),
        first = dayId===0&&row===0?true:false;

        for(c=0; c< channels.length; c++){
            if(created||first){
                var meogo;
                channels[c].meogo==="true"?meogo=' active':meogo='';
                var chNum = channels[c].number;
                chNum<10?chNum="0"+chNum:false;
                gridElements.chCont.innerHTML += '<div class="channel"><div class="channel-number" id="ch'+channels[c].id+'"> <span>'+ chNum +'</span><div class="meogo-state glyphicon glyphicon-play-circle'+meogo+'"></div></div><img class="channel-logo" src="'+channels[c].logo+'">';
            }
            var progRow = document.createElement("div");
            progRow.className = "programm-row"
            for(pr=0;pr<channels[c].programs.length;pr++){
                var start = channels[c].programs[pr].startTime;
                var end = channels[c].programs[pr].endTime;
                var classNow = '';
                var marginLeft='';

                if(pr===0){
                    marginLeft = (start.split(':')[0]*(scale*2)+((start.split(':')[1]/30)*scale))+"px";
                }

                if(start.split(':')[0]+start.split(':')[1]<=(hours*100)+minutes && end.split(':')[0]+end.split(':')[1]>=(hours*100)+minutes){
                    classNow = ' live-now';
                    progNowIds[c]={"id":channels[c].programs[pr].id, "end":end.split(':')[0]+end.split(':')[1]};
                }
                end.split(':')[0]==="00"?end="24:"+end.split(':')[1]:false;
                var size = ((end.split(':')[0]-start.split(':')[0])*scale*2)+(((end.split(':')[1]-start.split(':')[1])/30)*scale)-4;
                var progAnchor = document.createElement('a');
                progAnchor.className = "programm"+classNow;
                progAnchor.id = 'p'+channels[c].programs[pr].id;
                progAnchor.style.width = size+'px';
                progAnchor.style.marginLeft = marginLeft;
                progAnchor.href = "#";

                progAnchor.innerHTML += '<div class="prog-content"><h1 class="prog-title">'+channels[c].programs[pr].name+'</h1><div class="prog-time"> <span class="start">'+start+'</span> - <span class="end">'+end+'</span></div><div class="icons"><div class="more">+</div><div class="record'+channels[c].programs[pr].recordType+'"></div></div></div>';

                progRow.appendChild(progAnchor);
            }
            cell[row].appendChild(progRow);
        }

    }

  

解决：我没有声明XMLHttpRequest对象，所以以下所有实例都超过了之前的版本！