javascript - 如何使用 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 来调用 Controller ，该 Controller 从数据库中获取最后一条消息，然后将它们附加到#messagewindow。回调中的最后一件事是 setTimeout，因此帽子每 4 秒更新一次。

在提交操作时，我将新消息发布到 Controller 并在回调中再次调用 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 变量，看起来你在重复这样做。取出handler中的var:

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