javascript - 在for循环内的while循环内调用Ajax API？

Question

所以我正在为一个类制作一个 API 混搭。现在，我收到了来自 Google Maps API 的 json 响应。我通过使用 for 循环从响应中获得 5 个航点。我要解决的问题是一些坐标在死空间中并且没有与之相关的图片。我想在 4 次迭代中的每一次都进行 ajax 调用，但是如果没有图片，那么它会迭代直到找到一张，然后回到它停止的地方。我尝试使用一个while循环，以便它可以进行调用，并且在成功的坐标下，while循环变量将设置为true，然后它会跳出while循环，然后返回到for循环，它会迭代到下一个“航路点”。到目前为止，我没有收到错误，该网站正在超时，也许是电话太多了？也许我'

// so this for loop divides the hundreds of steps by 1/4 of the total length.
for (i=0; i<polyPoints.length; i+=quarters) {
    // gets the coords for the current iteration.
    var lat = polyPoints[i][0];
    var lng = polyPoints[i][1];

    var hasPic = false;
    var origI = i;

    //while loop runs through and checks to see if the coordinate has pictures at it.
    while (hasPic == false){
        $.ajax({
            type : "GET",
            dataType : "jsonp",
            ajaxI: i,
            url: 'https://api.instagram.com/v1/media/search?lat='+lat+'&lng='+lng+'&distance=5000&access_token='+token,
            success: function(data){
                i = this.ajaxI;
                //if null,increases the iteration by one, and then runs through the loop again, checking the next coordinate? I hope.
                if(typeof data.data[0] === "undefined" || data.meta.code == 400){
                    i++;
                    console.log("i increased to "+i);
                }else{
                    //if the pic is there then it assigns a random picture from the result to the images array.
                    images.push(data.data[Math.floor(Math.random() * data.data.length)].images.low_resolution.url);

                    //sets while loop to stop
                    hasPic = true;

                    //loads the current iterations coordinates for the later for loop to create markers.
                    waypoints.push([lat,lng]);
                }
            }, //data.data[0].images.low_resolution.url
            error: function(data){
                i = this.ajaxI;
                i++;
                //images.push(img/test.jpg");
            }
        }).responseText;
    }//waypoints.push([lat,lng]);

    //resets the i back to the original iteration before it got increased
    i = origI;
}

Answer 1

这是我的尝试，使用$.Deferred：

function tryGetImage(firstI, maxI) {
    var dfr = $.Deferred();
    var inner = function(i) {
        if(i >= maxI) dfr.reject();

        var lat = polyPoints[i][0];
        var lng = polyPoints[i][1];
        $.ajax({
            type : "GET",
            dataType : "jsonp",
            url: 'https://api.instagram.com/v1/media/search?lat='+lat+'&lng='+lng+'&distance=5000&access_token='+token,
        }).done(function(data){
            //if null,increases the iteration by one, and then runs through the loop again, checking the next coordinate? I hope.
            if(typeof data.data[0] === "undefined" || data.meta.code == 400){
                inner(i + 1);
            }else{
                var img = data.data[Math.floor(Math.random() * data.data.length)].images.low_resolution.url);
                dfr.resolve(img, [lat, lng]);
            }
        ).fail(function(data){
            inner(i + 1);
        });
    };
    inner(firstI);
    return dfr.promise();
}

var dfrs = [];
for (i=0; i<polyPoints.length; i+=quarters) {
    var dfr = tryGetImages(i, i + quarters)
    dfr.done(function(img, coords) {
        images.push(img);
        waypoints.push(coords);
    })
    dfrs.push(dfr);
}
$.when.apply($, dfrs).always(function() {
    console.log("All requests complete");
});

Answer 2

第 14 行的三等号（===）？我想你的意思是 == ？