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内定义的变量是在全局级别设置的，而不是在函数的上下文中设置的。所以你可能会看到的是：

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

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

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

1 个答案: