Javascript Reload Div Conflict

Question

Я хочу обновить div с помощью JavaScript. Я могу справиться с этим, но моя структура сложнее.

Если пользователь нажимает кнопку, появляется новый div. После этого этот div должен перезаряжаться каждые 3 секунды. Эти части в порядке. Проблема в том, что пользователь нажимает на другую кнопку, система перезагружает старый div. Например. пользователь сначала нажимает кнопку Nr 1, затем открывается и начинает перезагружаться каждые 3 секунды. Затем пользователь нажимает кнопку Nr 2, он открывается, но перезагружает div Nr 1 после 3 секунд.

Вы можете найти мой код ниже:

function refreshDiv(id){ 
    $.ajax({ 
     url: '<?php echo site_url('canli'); ?>/' + id, 
     type: "GET", 
     data : "", 
     success: function(data) { 
      if (data != null) 
       $("#matchDetails").html(data); 
     }, 
     error: function (data) { 
      console.log(data); 
     } 
    }); 
} 

$('.livemenumatch').click(function() { 
    clearInterval(refreshIntervalId); 
    var id = $(this).attr('data-id'); 
    localStorage.setItem("lastid", id); 
    $.ajax({ 
     url: 'http://localhost/modo/li/' + id, 
     type: 'POST', 
     data: { 'submit': true }, 
     success: function(data) { 
      $("#matchDetails").html(data); 
     }, 
    }); 

    var lastid = localStorage.getItem('lastid', lastid); 
    var refreshIntervalId = setInterval(function() { 
     refreshDiv(lastid) 
    }, 3000); 
}); 

Я пытался очистить интервал после нажатия кнопки, но ничего не изменилось. Заранее спасибо.

Answer 1

Проблема заключается в том, что переменная refreshIntervalId, которая содержит interval, устанавливается в пределах области действия обработчика щелчка. Это означает, что при нажатии кнопки # 2 переменная ничего не держит и предыдущий интервал не очищается. Вам нужно объявить переменную интервала в более высокой области. Попробуйте это:

var refreshIntervalId; // delcare the variable here... 

$('.livemenumatch').click(function() { 
    clearInterval(refreshIntervalId); 

    // rest of your code... 

    refreshIntervalId = setInterval(function() { 
     refreshDiv(id) 
    }, 3000); 
}); 

Заметим, однако, что лучше шаблон для использования вместо setInterval() является вызов setTimeout() после каждого успешного завершения запроса. Это означает, что если каждый запрос занимает больше 3 секунд, они не будут получать резервные копии и наводняют сервер.

function refreshDiv() { 
    var id = localStorage.getItem('lastid'); 
    $.ajax({ 
     url: '<?php echo site_url('canli'); ?>/' + id, 
     type: "GET", 
     data : "", 
     success: function(data) { 
      if (data != null) 
       $("#matchDetails").html(data); 

      setTimeout(refreshDiv, 3000); 
     }, 
     error: function (data) { 
      console.log(data); 
     } 
    }); 
} 

$('.livemenumatch').click(function() { 
    var id = $(this).attr('data-id'); 
    localStorage.setItem('lastid', id); 
    $.ajax({ 
     url: 'http://localhost/modo/li/' + id, 
     type: 'POST', 
     data: { 'submit': true }, 
     success: function(data) { 
      $("#matchDetails").html(data); 
     }, 
    }); 
});