javascript - Javascript clearTimeout 即使使用所有函数都可用的计时器变量也不起作用

Question

我已经阅读了这里几乎所有关于清除 JS 计时器的帖子，但似乎没有任何效果。这是代码

$(document).ready(function() {

  var timeout;

  $('#chat_link').click(function() {

    var id = str_replace('chat_', '', $(this).attr('alt'));

    $.ajax({
      async: false,
      type: 'POST',
      url: '/members/functions/private_message_handler.php',
      dataType: 'json',
      data: 'member=' + id + '&action=get_old_messages',
      success: function(data, textStatus) {
        $('#chat_name').html(data.name);
        $('#message_area').html(data.messages);
        $('#chat_window').show();
        $('#message_area').animate({
          scrollTop: $('#message_area').get(0).scrollHeight
        }, 100);
        $('#message_member_id').val(id);
      }

    });

    get_messages(id, timeout);

  });

  $('#close_chat').click(function() {
    $('#chat_window').hide();
    $('#chat_name').html('');
    $('#message_area').html('');
    clearTimeout(timeout);
  });


  (function($) {

    get_messages = function(member_id, timeout) {

      var time = 3000;

      timeout = setTimeout(

        function() {

          $.ajax({
            async: false,
            type: 'POST',
            url: '/members/functions/private_message_handler.php',
            dataType: 'json',
            data: 'member=' + member_id + '&action=get_old_messages',
            success: function(data, textStatus) {
              $('#message_area').html(data.messages);
              $('#message_area').animate({
                scrollTop: $('#message_area').get(0).scrollHeight
              }, 100);
              get_messages(member_id);
            }

          });

        },
        time
      );

    };

  })(jQuery);

});

如您所见，我在所有函数之外创建了 timeout 变量，因此一切都可以“看到”它，我什至尝试将它传递给 get_messages 函数。无论我在聊天框关闭时做什么 ($('#close_chat').click(function()) 脚本都会继续运行。我不确定我做错了什么，但显然有些地方不对劲

Answer 1

timeout = setTimeout(...)在您的get_messages函数中更改本地变量的值timeout，而不是在脚本一开始定义的值。原始类型在 javascript 中通过值传递，您不能通过引用传递它们。

您可以将您的timeoutid 存储在一个对象中并传递该对象而不是原始值。此外，您需要在关闭聊天时取消下一个请求。

$(document).ready(function() {

    var options = {
        timeout: null,
        isChatVisible: false
    };

    $('#chat_link').click(function() {
        options.isChatVisible = true;

        var id = str_replace('chat_', '', $(this).attr('alt'));

        $.ajax({
            async: false,
            type: 'POST',
            url: '/members/functions/private_message_handler.php',
            dataType: 'json',
            data: 'member=' + id + '&action=get_old_messages',
            success: function(data, textStatus) {
                $('#chat_name').html(data.name);
                $('#message_area').html(data.messages);
                $('#chat_window').show();
                $('#message_area').animate({
                    scrollTop: $('#message_area').get(0).scrollHeight
                }, 100);
                $('#message_member_id').val(id);
            }

        });

        get_messages(id, options);

    });

    $('#close_chat').click(function() {
        $('#chat_window').hide();
        $('#chat_name').html('');
        $('#message_area').html('');
        clearTimeout(options.timeout);
        options.isChatVisible = false;
    });


    (function($) {

        get_messages = function(member_id, options) {

            var time = 3000;

            options.timeout = setTimeout(

                function() {

                    $.ajax({
                        async: false,
                        type: 'POST',
                        url: '/members/functions/private_message_handler.php',
                        dataType: 'json',
                        data: 'member=' + member_id + '&action=get_old_messages',
                        success: function(data, textStatus) {
                            // stop polling the server if chat is closed
                            if (!options.isChatVisible) {
                                return;
                            }

                            $('#message_area').html(data.messages);
                            $('#message_area').animate({
                                scrollTop: $('#message_area').get(0).scrollHeight
                            }, 100);
                            get_messages(member_id, options);
                        }

                    });

                },
                time
            );

        };

    })(jQuery);

});