javascript - 如何在另一个函数完成后立即触发另一个函数？

Question

我有以下代码:

<script>
function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id="+id+"&receiver="+receiver, function(data) {
        $(".conversation-content").html(data);
    });
    var scroller = $(".conversation-message-list").getNiceScroll(0);
    $(".conversation-message-list").getNiceScroll(0).doScrollTop($(".conversation-content").height(),-1); 
}
window.setInterval(function(){
    refreshChat();
}, 2000);

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
        $(".conversation-content").html(data);
            message.val("");
        });
    }
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();
    }
});
</script>

现在，refreshChat 函数每 2 秒调用一个 ajax 脚本。当您输入消息并按 Enter 键时，它会调用不同的 ajax 脚本。我希望它做的是同时调用这两个函数。所以脚本先调用sendMessage函数，然后再刷新。

我该怎么做？我已经尝试将其更改为:

<script>
function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id="+id+"&receiver="+receiver, function(data) {
        $(".conversation-content").html(data);
    });
    var scroller = $(".conversation-message-list").getNiceScroll(0);
    $(".conversation-message-list").getNiceScroll(0).doScrollTop($(".conversation-content").height(),-1); 
}

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
            $(".conversation-content").html(data);
            message.val("");
        });
    }
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();refreshChat();
    }
});
</script>

但这仅首先输入消息，并且仅在第二次按键(输入)时刷新。我要事先感谢大家对我的帮助。

Answer 1

这实际上是一种幻觉。这两个函数都被调用，但在聊天消息能够保存它们之前，聊天窗口正在刷新。

要解决此问题，您应该仅在成功保存新消息后刷新聊天窗口:

function refreshChat() {
    // Removed for brevity
}

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
            $(".conversation-content").html(data);
            message.val("");

            // Now, this will only be called once the ajax is complete
            refreshChat();
        });
    }
}

$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();

        // I removed the refreshChat() call from here and moved it
        // into the $.get() callback above ^^
    }
});

如您所见，我将您的 refreshChat() 方法移至现在从 jQuery $.get() 回调中调用。