javascript - getJSON 请求循环遍历参数数组，每次调用之间有延迟

Question

谁能帮我理解为什么下面的 jQuery/Javascript 代码没有以每秒 1 次左右的节奏运行，而是产生了层叠的 ajax 调用雪崩(慢到每秒多次)？

var i = 0, l = data.length;

function geocode() {

$.getJSON(
    'https://maps.googleapis.com/maps/api/geocode/json',
    {
        key: "xxxxx",
        sensor: false,
        address: data[i][3],
        region: 'gb'
    },
    function(d, textStatus, jqXHR) {
        if(d["status"] == "OK") {
            console.log(data[i][3]);
            console.log(d["results"][0]["geometry"]["location"]);
            i++;
            if(i < l) { window.setInterval(geocode, 1000); }
        }
    }
);

}

geocode();

在我的脑海中是这样流动的:

1. 第一次调用地理编码
2. 发出 Ajax 请求
3. 成功后(任意时间后)我会阅读结果
4. 增加索引
5. 如果我们还没有扩展数组，请设置另一个 geocode 调用以在 1 秒后开始

供引用:“数据”是一个嵌套的英国邮政编码数组，我正在尝试检索坐标以使用 Google 的地理编码 API。

Answer 1

您不断设置新的间隔，并且从不取消前一个间隔。您应该使用 clearInterval() 取消间隔或使用一次性 setTimeout。

如果您使用间隔，则在设置间隔时保存值:

var intervalId;
....
intervalId = setInterval(...);

然后

clearInterval(intervalId); 

当你需要一个新的间隔时。或者使用 setTimeout() 并根据需要重新发布。