0

我查看了一些 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 完成时。

4

4 回答 4

0

由于 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");
}
于 2014-09-02T17:37:14.123 回答
0

上面的评论是正确的。您需要在回调中进行更新。关于您的代码的几个调用。你应该总是var你的变量。不这样做，在 javascript 中，将变量添加到全局范围（这很糟糕！）。此外，最好使用 K&R 样式的大括号（在同一行而不是新行打开），因为使用 Allman 样式有时会导致问题。 文章链接

如果您想使用更现代的方法，那么我建议您使用 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');
});
于 2014-09-02T18:29:37.650 回答
0

尽管 jQuery 没有正确遵守Promises/A 规范，但该$.ajax()方法返回一个延迟对象，您可以利用该对象来处理您的响应逻辑。这是它可以工作的一种方式：

$.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 而言，同步做事通常不被认为是最佳实践，回调方法是可以的，但它存在多嵌套的疯狂和麻烦的错误处理。

于 2014-09-02T18:14:26.907 回答
-1

如果添加：

异步：假

对于您的 ajax 调用，您的 javascript 将等待 ajax 函数返回（成功或错误），然后再继续。

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

于 2014-09-02T17:14:36.573 回答