AJAX同じ関数からの複数の呼び出し、いくつかのコールバックが機能しない

Question

私は、それぞれ異なる引数を渡して次の関数を呼び出す複数のドロップダウンを持っています 1つのドロップダウンを変更して応答を待つ場合、 最初の応答の前に2番目のドロップダウンを変更すると、最初のコールバックが呼び出されないかのように表示されます。 （しかし、データベース内のデータは変更されています）

<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の外部に存在するため、最初の要素ではなく2番目の要素を参照します。したがって、2番目の要素が更新されます。
5. Ajax要求は、2番目の呼び出しから戻ってきます。同じことが再び起こります。

TL; DRはfg_insert_pickに設定された変数にvar秒を追加します。