Question

我看了一些寻找我的问题的AJAX线程，但我找不到解决方案。事情就是这样：

我有一个包含用户评论的页面。这些注释保存在数据库中，每次用户按下“刷新”按钮时，都会与数据库建立连接，并在响应中获取注释。如果有任何新消息，则有一个div“有_新消息”。但是，最后一条消息从未正确显示，因为在消息加载之前显示。

以下是代码：

AJAX功能

function GetComments() { $("#cont-comment").empty(); //div that contains the messages $.ajax( { url: "get.php", dataType: "json", success: function(data) { n_msg=data.length; for (i=0; i<n_msg; i++) { nick=data[i].nick; msg=data[i].msg; WriteNewComment(nick,msg); num_comments=document.getElementsByClassName("comment-msg").length; } } }); }

这就是问题所在。

$("#refresh").click(function() { num_comments_before=num_comments; GetComments(); alert("done"); });

“完成”消息出现在新评论之前。我希望只有当新的评论出现时 - AJAX结束时才会出现“完成”的消息。

Answer 1

由于ajax是一个异步调用，浏览器会在您进行ajax调用后立即生成一个线程并继续其流程，这就是为什么您的“完成”消息出现在新注释之前。理想情况下，除非强烈要求，否则不应阻止代码。

您可以在回叫中调用alert（'done'）函数，如下所示...

 function GetComments(alertFunction)
{
    $("#cont-comment").empty(); //div that contains the messages
    $.ajax(
    {
        url: "get.php",
        dataType: "json",
        success: function(data)
        {
            n_msg=data.length;
            for (i=0; i<n_msg; i++)
            {
                nick=data[i].nick;
                msg=data[i].msg;
                WriteNewComment(nick,msg);
                num_comments=document.getElementsByClassName("comment-msg").length;
            }

          **alertFunction();**
        } 
    });
}



$("#refresh").click(function()
{
    num_comments_before=num_comments;
    GetComments(alertFunction);

});

function alertFunction(){
  alert("done");
}

Answer 2

虽然jQuery没有正确地遵守Promises/A spec，但$.ajax()方法会返回deferred object，您可以利用它来处理响应逻辑。这是一种可行的方式：

$.when(getComments).then(processComments);

function getComments() {
    $("#cont-comment").empty();
    return $.ajax({
        url: "get.php",
        dataType: "json",

    });
}

function processComments(data) {
    n_msg=data.length;
    for (i=0; i<n_msg; i++) {
        nick=data[i].nick;
        msg=data[i].msg;
        WriteNewComment(nick,msg);
        num_comments=document.getElementsByClassName("comment-msg").length;
    }
    alert("done");
}

当涉及到JavaScript时，同步做事并不被认为是最佳实践，并且回调方法没问题但是它存在多嵌套疯狂和麻烦的错误处理。

Answer 3

以上评论是正确的。您需要在回调中进行更新。关于你的代码的一些呼吁。您应始终var您的变量。不这样做，在javascript中，将变量添加到全局范围（这很糟糕！）。此外，最好使用K＆amp; R风格的支架（在同一条线上不在新线上打开），因为使用Allman风格有时会引起问题。 link to article

如果您想使用更现代的方法，我建议您使用jquery $.when和.done()进行ajax调用。

$.when(GetComments()).done(function(data){
  var n_msg = data.length, i=0, nick, msg, num_comments=0;
  n_msg = data.length;
  for (; i<n_msg; i++) {
    nick = data[i].nick;
    msg = data[i].msg;
    WriteNewComment(nick,msg);
    num_comments=document.getElementsByClassName("comment-msg").length;
  }
  alert('done');
});

Answer 4

如果你添加：

async：false

到你的ajax调用，你的javascript会在继续之前等待ajax函数返回（成功或错误）。

http://api.jquery.com/jquery.ajax/

等到AJAX完成后再继续

4 个答案: