1

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

<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>
4

1 回答 1

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_nameand parentlive outside fg_insert_pick，他们现在指的是第二个元素，而不是第一个。因此，第二个元素被更新。
  5. Ajax 请求从第二次调用返回。同样的事情再次发生。

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

于 2012-04-24T05:59:34.027 回答