проблема setInterval с функцией get message

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

У вас есть проблема с областью действия ваших переменных.

Когда вы определяете 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.