javascript - AJAX 在按下按钮之前不会自动更新

Question

我正在制作一个对话系统，让 2 个人可以互相聊天。我制作了一个 AJAX 函数，它每 2 秒更新一次包含消息的 DIV 框。

这是按预期工作的，在用户写了一条消息之后。为什么不立即运行 AJAX 调用？

// SET AUTORUN updateMessages() EVERY 2 SECONDS
$(document).ready(function() {
    var interval
    window.onload = function(){
        interval = setInterval('updateMessages()', 2000);
    };
});

// UPDATE #mail_container_conversation
function updateMessages() {
    $.ajax({
        type: "POST",
        url: "<?php echo site_url(); ?>mail/ajaxupdate/<?php echo $user; ?>",
        data: dataString,
         
        success: function(data){
            $("#mail_container_conversation").html(data);
        }        
    });
}


// SEND NEW MESSAGE
$(function(){
    $("#mail_send").submit(function(){
        dataString = $("#mail_send").serialize();
         
        $.ajax({
        type: "POST",
        url: "<?php echo site_url(); ?>mail/send",
        data: dataString,
         
        success: function(data){
            updateMessages();
            $(".mail_conversation_answer_input").val('');
        }
                  
        });
                 
        return false;
    });
});

Answer 1

您应该向 setTimeout/setInterval 函数提供函数而不是字符串。而且您也不需要在窗口加载事件上设置间隔。您可以将其保留为 DOM 就绪的一部分:

$(function() {
    updateMessages(); // don't wait 2 seconds for first update
    setInterval(updateMessages, 2000); // update every 2 seconds
});

其他一切似乎都应该按预期工作只要您的 posback 在没有收到数据时工作(引用 dataString)。

我希望您确实意识到您正在使用隐含的全局变量并理解为什么这可能是一个大问题(再次引用 dataString)。

我将如何重写您的代码

我会将您的整个代码重写为以下内容，删除隐含的全局变量 dataString，不会用其他函数污染全局范围，并使用 setTimeout 而不是间隔，这可能在某些情况下会出现问题(尽管在您的情况下，因为它每 2 秒才运行一次，所以如果没有额外的非常复杂的客户端脚本执行，应该不会有问题)

我将所有内容都保留在函数闭包本地范围内:

$(function() {

    var timeout = null;

    var form = $("#mail_send").submit(function(evt){
        evt.preventDefault();
        $(".mail_conversation_answer_input", form).val("");
        updateMessages();
    });

    var updateMessages = function() {

        // we don'w want submit to interfere with auto-updates
        clearTimeout(timeout);

        $.ajax({
            type: "POST",
            url: "<?php echo site_url(); ?>mail/send",
            data: form.serialize(),
            success: function(data){
                $("#mail_container_conversation").html(data);
                timeout = setTimeout(updateMessages, 2000);
            }
        });
    };

    // start updating
    updateMessages();

});

此代码要求您的服务器端(在 /mail/send 上处理)了解当没有任何内容被发布(没有数据)时它不会在对话中添加空行而是知道这只是一个更新调用。此功能现在仅使用一个服务器端 URL，而不是两个。如果您仍然需要两个，那么这段代码应该可以解决问题:

$(function() {

    var timeout = null;
    var url = {
        update: "<?php echo site_url();?>mail/ajaxupdate/<?php echo $user;?>",
        submit: "<?php echo site_url();?>mail/send",
        use: "update"
    };

    var form = $("#mail_send").submit(function(evt){
        evt.preventDefault();
        url.use = "submit";
        $(".mail_conversation_answer_input", form).val("");
        updateMessages();
    });

    var updateMessages = function() {

        // we don'w want submit to interfere with auto-updates
        clearTimeout(timeout);

        $.ajax({
            type: "POST",
            url: url[url.use],
            data: form.serialize(),
            success: function(data){
                $("#mail_container_conversation").html(data);
                url.use = "update";
                timeout = setTimeout(updateMessages, 2000);
            }
        });
    };

    // start updating
    updateMessages();

});