javascript - 如何在 for 循环中等待直到 ajax 调用完成

Question

我是开发网站的新手，正在开发一个小型网站。在这里，我使用 ajax 来显示新评论。这是我写的函数

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);
}

PHP

模型

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);
}

查看

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

即使我在 ajax success 函数中设置了 async: false 我也只能在 ajax success 函数中获取最后一个 id(最后一个 div 的 id)。但是当我提醒 id(id div)在ajax部分上方我得到了正确的id。那么我怎样才能暂停循环直到 ajax 函数完成。抱歉我的英语不好请帮助我

Answer 1

尝试将 ajax 调用包装到立即调用的函数并将 id 传递给它:

    $('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)
    });

看起来你的 id var 是全局的，在每个循环中它都会重写它的值，到 ajax 完成时，id 等于最后一个值循环。