javascript - 获取消息函数的 setInterval 问题

Question

我正在调用一个方法来从数据库检索消息。我在该方法上使用 setInterval() (用于实时聊天)

问题是，当我单击另一个用户时，我再次收到该用户的消息(无需刷新)。之后，该函数开始同时从第一个用户和第二个用户的 2 个用户处获取消息。就像我克隆了该函数以在不同的用户上运行两次一样。我该如何解决这个问题？

function open_message_box(thread_id, now, x = false) {
  $("#msg_body").html("<div class='text-center' id='payment_loader'><i class='fa fa-refresh fa-5x fa-spin'></i></div>");
  $("#msg_box_header").html("<a class='c-base-1' target='_blank' href='<?=base_url()?>home/member_profile/" + $(now).find('.contacts-list-name').data('member') + "'>" + $(now).find('.contacts-list-name').html() + "</a>");
  $("#msg_refresh").html("<a onclick='refresh_msg(" + thread_id + ")'><i class='fa fa-refresh'></i> <?=translate('refresh')?></a>");

  $.ajax({
    type: "POST",
    url: "<?=base_url()?>home/get_messages/" + thread_id,
    cache: false,
    success: function(response) {
      clearInterval(message_interval);
      var message_interval = setInterval(function() {
        $("#msg_body").load('<?=base_url()?>home/get_messages/' + thread_id);
      }, 3000);
      $("#msg_body").removeAttr("style");
      $("#message_text").removeAttr('disabled');
      $("#message_text").val('');
      $("#msg_body").html(response);
    }
  });
}

Answer 1

您的变量范围有问题。

当您在 success 函数内定义 var message_interval 时，它仅在该函数内可用。

这意味着当您使用 clearInterval(message_interval) 清除间隔时，message_interval 是未定义的。您可能认为这是之前的 message_interval，但事实并非如此。

解决此问题的一种简单方法是在函数外部声明变量并在需要时定义它。

像这样的东西应该有效。

var message_interval;

function open_message_box(thread_id, now, x = false) {
  $("#msg_body").html("<div class='text-center' id='payment_loader'><i class='fa fa-refresh fa-5x fa-spin'></i></div>");
  $("#msg_box_header").html("<a class='c-base-1' target='_blank' href='<?=base_url()?>home/member_profile/" + $(now).find('.contacts-list-name').data('member') + "'>" + $(now).find('.contacts-list-name').html() + "</a>");
  $("#msg_refresh").html("<a onclick='refresh_msg(" + thread_id + ")'><i class='fa fa-refresh'></i> <?=translate('refresh')?></a>");

  $.ajax({
    type: "POST",
    url: "<?=base_url()?>home/get_messages/" + thread_id,
    cache: false,
    success: function(response) {
      clearInterval(message_interval); //this clears the global message_interval
      message_interval = setInterval(function() {
        $("#msg_body").load('<?=base_url()?>home/get_messages/' + thread_id);
      }, 3000);
      $("#msg_body").removeAttr("style");
      $("#message_text").removeAttr('disabled');
      $("#message_text").val('');
      $("#msg_body").html(response);
    }
  });
}

现在 clearInterval(message_interval); 实际上会清除之前的 message_interval。