如何使用setTimeout和clearTimeout重启JS中的递归函数？

Question

我正在尝试在CodeIgniter中构建简单的聊天模块。

var last_id = 1;

        $(document).ready(function(){
            loadMsgs();
            $("#content").focus();
            $("form#chatform").submit(function(){

                $.post("<?php echo base_url() ?>index.php/msg/update",{
                            message: $("#content").val(),
                            con_id: <?php echo $con['conversation_id'] ?>
                            }, function(){
                                $("#content").val("");
                                $("#content").focus();

                                loadMsgs();
                });     
                return false;
            });
        });

        function loadMsgs() {
            $.getJSON('<?php echo base_url() ?>index.php/msg/backend/<?php echo $con['conversation_id'] ?>/' + last_id, function(json) {
                $.each(json, function(i,val){
                    //console.log(val.id);
                    if(<?php echo $login_id ?> == val.sender_id){
                        $("#messagewindow").append('<div class="bubble"><p>' + val.msg + '</p></div>');
                    } else {
                        $("#messagewindow").append('<div class="bubble bubble-right"><p>' + val.msg + '</p></div>');
                    }
                });
                updateScroll();
                var newIndex = json.length-1;
                if(typeof(json[newIndex]) != 'undefined'){
                    last_id = json[newIndex].msg_id;
                }
                setTimeout('loadMsgs()', 4000);
            });
        }
        function updateScroll(){
            var element = document.getElementById("messagewindow");
            element.scrollTop = element.scrollHeight;
        } 

我有函数loadMsgs使用$ .getJSON来调用控制器，该控制器从数据库中获取最后的消息，然后将它们附加到#messagewindow。 回调中的最后一件事是setTimeout，所以帽子每4秒更新一次。

在提交操作时，我将新消息发送到控制器并在回调中再次调用loadMsgs。 因此，每次我提交新消息时都会添加额外的呼叫，这是不好的。

我试图clearTimeout添加全局变量id，更改了var id = setTimeout('loadMsgs()', 4000); 并added clearTimeout(id); 在提交另一条消息后再次调用loadMsgs之前。 但是没有任何改变

Answer 1

如果你有一个全局变量id ，然后在你的处理程序中调用

var id = setTimeout('loadMsgs()', 4000);

你永远不会触及全球id 。

通过在处理程序中再次使用var，您将定义另一个（和另一个......） id副本，在每个上设置超时。 Var定义了一个NEW变量，看起来你正在重复这样做。 取出处理程序中的var ：

clearTimeout(id);
id = setTimeout('loadMsgs()', 4000);

Answer 2

解决此问题的一种简单方法是在提交时调用loadMsgs时将参数传递给loadMsgs 。 然后你测试这个参数的存在。 如果存在，请不要调用setTimeout ：

$("form#chatform").submit(function(){
    // ...

        loadMsgs(1);
     // ...
 });

 function loadMsgs(submitting) {
     // ...


     if (!submitting) setTimeout(loadMsgs, 4000);
     // ...
 }

Answer 3

如果从提交操作中删除loadMsgs（）并将其留到4秒JSON以自动填充新消息，会发生什么？ 也许使用JS从提交中创建一个新消息的虚容器，然后在捕获新JSON时清除该虚拟元素？