Ajax程序没有像我预期的那样运行

Question

Ajax program is not running as I expect. See the code

$(document).ready(function(){
$("input").keyup(function() {
    for(var i=400;i<421;i++){
        (function(counter){
            counter=String(counter);
            $.ajax({
                type: "GET",
                url: "results/result_html.php?usn="+txt+counter+"&resultType="+resultType,
                dataType:"JSON",
                success:function(result){
                    $("#info").hide();
                    $("#result").html(result);              
                    $("#usn").attr("placeholder", "Class USN");
                }
            });
        })(i);
    }
    alert("hai");
});});

In this code I want to show the alert after completing all Ajax request which is in that for loop. But when I run this code alert is showing first. I'm new to Ajax please can anyone help me to run as I expected.

Answer 1

Ajax is Asynchronous which means, it will continue running the code in parallel. The success function is called after the Ajax request is complete. What you can do is this:

$(document).ready(function(){
$("input").keyup(function() {
    var loopsToDo = 20, done=0;
    for(var i=400;i<421;i++){
            var counter=String(i);
            $.ajax({
                type: "GET",
                url: "results/result_html.php?usn="+txt+counter+"&resultType="+resultType,
                dataType:"JSON",
                success:function(result){
                    $("#info").hide();
                    $("#result").html(result);              
                    $("#usn").attr("placeholder", "Class USN");
                },
                complete : function(){
                    done++;
                    if( done == loopsToDo)
                    {
                        alert("DONE")
                    }
                }
            });
    }

});});