来自同一函数的 AJAX 多次调用，一些回调不起作用

Question

我有多个下拉菜单，每个下拉菜单都调用以下函数（传递不同的参数） 如果我更改一个下拉菜单并等待响应，一切都很好。 如果我在第一个响应之前更改了第二个下拉列表，则似乎从未调用过第一个回调。 （但数据库中的数据已更改）

<script type="text/javascript">
<!--
function fg_insert_pick(element, team_id, tournament_id, pick_number) {
    golfer_id = element.value;
    golfer_name = element.options[element.selectedIndex].text;;
    parent = element.parentNode;
    parent.removeChild(element);
    parent.innerHTML="submitting pick ...";
    path = "'.plugins_url('fantasy-golf/submit/pick.php').'";
    post = "team_id="+team_id+"&tournament_id="+tournament_id+"&pick_number="+pick_number+"&golfer_id="+golfer_id;
    parent.innerHTML="submitting pick ...";

    fg_ajax_request(path, post, function(response) {
        if (response) {
            parent.innerHTML=golfer_name;
        } else {
            parent.innerHTML="Something went wrong, please reload the page";
        }
    });
}

function fg_ajax_request(url, post, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange= function () {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(post);
}
//-->
</script>

Answer 1

对我来说，这看起来像是一个简单的变量范围问题。 fg_insert_pick 中定义的变量是在全局级别上设置的，而不是在函数的上下文中。所以你可能看到的是这样的：

1. fg_insert_pick 被调用。 golfer_name 设置为元素的选定选项，parent 设置为给定元素的父节点。
2. Ajax 请求已启动。
3. 同时，fg_insert_pick 使用不同的元素调用。然后根据这个元素覆盖golfer_name 和parent。
4. Ajax 请求从第一次调用返回，并调用fg_insert_pick 中的回调。由于golfer_name 和parent 位于fg_insert_pick 之外，它们现在指的是第二个元素，而不是第一个元素。因此，第二个元素被更新。
5. Ajax 请求从第二次调用返回。同样的事情再次发生。

tl;dr 将vars 添加到fg_insert_pick 中设置的变量中。