在javascript for循环中，在get方法执行之前执行

Question

In the following example variable e contains all the selected clients from a select box, I am iterating them one by one in a for loop and passing them via jQuery's get method to take values according to client but the for loop is executing before get method ends and due to that it changes the value of val (which is next value). How to resolve this problem ?

var e = document.getElementById("client");
for (var i = 0; i < e.options.length; i++) {
    if (e.options[i].selected) {
        var val = e.options[i].value;
        alert(val); // here it is coming normally

        $('#fund').append('<option value=' + select.options.length + '>---' + val + '----</option>');   
        $.get("listFundsForClient", { client: val }, function(data) {
            alert("2nd:" + val);// here it is taking next value due to for loop iteration
        });
    }
}

Answer 1

it is because here val is a closure variable, it can be re-written as

$('#client option:selected').each(function(){
    var $this = $(this), val =$this.val();
    alert(val); // here it is coming normally

    $('#fund').append('<option value='+select.options.length+'>---'+val+'----</option>');   
    $.get("listFundsForClient", {client: val}, function(data) {
        alert("2nd:"+val);// here it is taking next value due to for loop iteration
    });
})

Answer 2

You can make the call using $.ajax() to do it synchronously, like this:

$.ajax({
  url: myUrl,
  async: false,
  data: myData,
  success: function(data) {
    //stuff
  }
});