javascript - 为什么我的程序会发出无休止的 GET 请求？

Question

该程序的目的是在按下更新按钮时在 Google map 上发布最近 SoundCloud 上传的位置。每次按下“更新”按钮时都会调用 populate() ，并将在 map 上发布位置之一或调用重新填充数组的 findLocations() 。由于某种原因，当 populate() 调用 findLocations() 时，它会发出无限请求。这是我用 JavaScript 编写的第一个程序，所以这可能是一个相当菜鸟的错误，如果有人能阐明这一点那就太好了! GitHub 链接也在这里。

编辑:当我设置断点并单步执行程序时，findLocations() 起作用。我开始认为问题可能与 GET 请求是异步调用这一事实有关。我认为正在发生的事情是:

1. 按下“更新”按钮并调用locate()
2. 地址显示为空，因此locate调用findLocations()
3. findLocations() 异步请求 GET“/tracks”，从而创建线程 A 和 B。
4. 线程A进入request的回调函数并更新'addresses'数组。线程B离开findLocations()(不执行回调函数)，返回locate()递归调用自身。因为这种情况发生的速度比线程 A 更新“地址”的速度更快，所以“地址”仍然显示为空，因此再次调用 findLocations，重复步骤 3 的过程。

这个理论听起来合法吗？如果是，我将如何测试这个理论？

https://github.com/blasian/soundcloud-map/tree/drunk

var locations = [];
var offset = 10;    

// Create locations array
function findLocations() {
    SC.get("/tracks", { limit: 10, offset: offset }, function(tracks){
        offset += 10;
        for (var i = 0; i < tracks.length; i++) {
            SC.get("/users/" + tracks[i].user_id, function(user){
                if (user.country) { 
                    locations.push(user.country);
                    console.log(user.country);
                }
            });
        }
    });
}

// Add next location to map
function locate() {
    console.log(locations);
    if (locations.length > 0) {
        gcode(locations.pop());
    } else {
        findLocations();
        locate();
    }
}

Answer 1

您正在使用递归函数:

function locate() {
    if (locations.length > 0) {
        // recursion stops here
    } else {
        // updateLocationsUsingAJAX()
        // recursion continues here
        locate();
    }
}

这并不像您期望的那样工作:

1. 当 AJAX 请求更新 locations 变量时，JavaScript 已经触发了数百个 AJAX 请求
2. 事实上，AJAX 回调不会被触发，因为 JavaScript 太忙于递归调用递归函数(更新变量排队等待 JavaScript 空闲的回调)

解决方案是重新安排代码，以便您处理位置变量 - 或者 - 在 AJAX 回调函数内触发下一个 AJAX 请求。