如何等待for循环直到ajax调用结束

Question

I'm new to developing web sites and I'm developing a small web site. Here I'm using ajax to show new comments. this is the function I wrote

function show_comments() {
$('div#P_all_posts>div').each(function () {
    id = this.id.replace("post", "");
    $.ajax({

        url: 'http://localhost/seppro/index.php/group/show_comments',
        type: 'post',
        data: {
            id: id
        },
        success: function (data) {

           document.getElementById("cmnt"+id).innerHTML=data;

        },
        error: function (err, req) {
            alert(err)
        },
        async: false
    });

});
setTimeout("show_comments()", 5000);
}

The PHP

model

public function showcmnts(){ 
    $sql="select * from tbl_cmnt 
          where postid='".$this->input->post("id")."'"; 
    $query = $this->db->query($sql); return $query->result(); 
}

controller

 public function show_comments(){
    $data['cmntlist'] = $this->Group_model->showcmnts();
    $this->load->view('group/grp_cmnts', $data);
}

view

foreach ($cmntlist as $cmnt):
echo $cmnt->comment . "<br>";
endforeach;

even though I set async: false in the ajax success function I can only get the last id(id of the last div) inside the ajax success function.but when i alert the id(id of the div) above the ajax part i am getting the correct id . so how can I pause the loop until ajax function finishes.sorry for my bad English please help me

Answer 1

The error seems to be in the fact that you never call the function show_comments() for first time in the the script

1. I recommend you to use this when you call it

   setInterval(show_comments(), 5000)

And remove the setTimeOut() from show_comments()

2. Or you can just keep setTimeOut() and call show_comments() inside the script path or in the function you are going to call it

Answer 2

Try to wrap your ajax call to immediately invoked function and pass id to it:

    $('div#P_all_posts>div').each(function () {
        id = this.id.replace("post", "");
        (function(id) {
            $.ajax({

                url: 'http://localhost/seppro/index.php/group/show_comments',
                type: 'post',
                data: {
                    id: id
                },
                success: function (data) {

                    document.getElementById("cmnt" + id).innerHTML = data;

                },
                error: function (err, req) {
                    alert(err)
                },
                async: false
            });
        })(id)
    });

It seems like your id var is global, and on each loop it rewrites its value, and by the time ajax is completed, id is equal to last value in loop.