获取消息功能的 setInterval 问题答案

【问题标题】：setInterval issue with get message function获取消息功能的 setInterval 问题
【发布时间】：2020-04-06 13:59:11
【问题描述】：

我正在调用一个从数据库中检索消息的方法。我在该方法上使用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);
    }
  });
}

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您的变量范围有问题。

当您在成功函数中定义 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。

【讨论】：