jQuery clearinterval не работает/не очищает интервал между всеми событиями

Question

У меня есть функция autorefresh, которая вызывается, если флажок установлен и нажимается кнопка. Он автоматически обновляет таблицу из файла php с определенными переменными, привязанными к этой кнопке. Когда нажимается другая кнопка (с разными переменными, связанными с ней), автообновление должно останавливаться, то есть интервал должен быть очищен. Это, однако, я не могу работать, интервалы просто складываются - старый не очищается - хотя я пытаюсь вызвать функцию clearinterval в любом месте в моем коде.

Это как мой файл состоит из:

$.ajaxSetup({ 
    cache: false 
}); 

var refreshId = null; 

function stopinterval() { 
    clearInterval(refreshId); 
    return false; 
} 

$(document).ready(function() { 

    $("#button1").click(function(infralivefun) { 
     event.preventDefault(infralivefun); 

     var category_id = {}; 
     category_id['datumanf'] = $("#datumanf").datepicker().val(); 
     category_id['datumend'] = $("#datumend").datepicker().val(); 

     $.ajax({ 
      type: "POST", 
      url: "infratestomc.php?id=" + Math.random(), 
      dataType: "html",  
      data: category_id, 
      success: function(response) { 
       $("#resulttabelle").show().html(response); 
      } 
     }); 

     if ($('#autorefcheck').is(':checked')) { 
      refreshId = setInterval(function() { 
       var category_id = {}; 
       category_id['datumanf'] = $("#datumanf").datepicker().val(); 
       category_id['datumend'] = $("#datumend").datepicker().val(); 

       $.ajax({ 
        type: "POST", 
        url: "infratestomc.php?id=" + Math.random(), 
        dataType: "html", 
        data: category_id, 
        success: function(response) { 
         $("#resulttabelle").show().html(response); 
        } 
       }); 
      }, 5000); 
     } 
     //trying to call the stopinterval inside the button.Click event below 
     $('#button2').click(function() { 
      stopinterval(); 
     }); 

     $('#button3').click(function() { 
      stopinterval(); 
     }); 

     $('#autorefcheck').click(function() { 
      stopinterval(); 
     }); 

    }); //end of on.click(button) 


    //here I'm trying to call clearinterval outside of the button.click 
    $('#button2').click(function() { 
      stopinterval(); 
    }); 

    $('#button3').click(function() { 
     stopinterval(); 
    }); 

    $('#autorefcheck').click(function() { 
     stopinterval(); 
    }); 

}); //end of document.ready 

Представьте себе, что button2 и Button3 имеют аналогичные свинчиваний только с другими переменными, передаваемых в PHP. Я был бы очень рад, если бы кто-то мог указать мне в правильном направлении, как я могу просто очистить этот интервал, когда я нажимаю на что-то еще!

Answer 1

Хорошо, если вы нажмете кнопку несколько раз, у вас будет несколько интервалов, так как вы никогда не проверяете, не работает ли она.

if ($('#autorefcheck').is(':checked')) { 
    stopinterval(); //cancel it if it is already set 
    refreshId = setInterval(function() { 
     ... 

Также добавление событий кликов внутри других событий кликов - плохая идея. Потому что при каждом нажатии вы добавляете несколько обработчиков кликов к этим другим элементам.

Answer 2

Немного fiddle для справки!

$.ajaxSetup({cache: false}); //Are you sure of it? 

$(function(){ 
    var refreshId=''; 
    function stopinterval() { 
     clearInterval(refreshId); 
     return false; 
    } 
    $("#button1").on('click',function(infralivefun) { 
     event.preventDefault(infralivefun); 

     var category_id = {}; 
     category_id['datumanf'] = $("#datumanf").datepicker().val(); 
     category_id['datumend'] = $("#datumend").datepicker().val(); 

     $.ajax({ 
      type: "POST", 
      url: "infratestomc.php?id=" + Math.random(), 
      dataType: "html",  
      data: category_id, 
      success: function(response) { 
       $("#resulttabelle").show().html(response); 
      } 
     }); 

     if ($('#autorefcheck').is(':checked')) { 
       refreshId = setInterval(function(){ 
        var category_id = {}; 
        category_id['datumanf'] = $("#datumanf").datepicker().val(); 
        category_id['datumend'] = $("#datumend").datepicker().val(); 
       },5000); 

       $.ajax({ 
        type: "POST", 
        url: "infratestomc.php?id=" + Math.random(), 
        dataType: "html", 
        data: category_id, 
        success: function(response) { 
         $("#resulttabelle").show().html(response); 
        } 
       }); 
      } 
     } 
    }); 
    $('#button2, #button3, #autorefcheck').on('click',stopinterval); 
}); 

Answer 3

Я не уверен, что это источник ваших проблем, но это определенно возможная проблема: у вас есть одна глобальная переменная, содержащая идентификаторы интервалов. Предположим, пользователь нажимает кнопку 1; вы сохраняете refreshID, чтобы очистить его позже. Затем пользователь снова нажимает кнопку 1 (или на другую кнопку, на самом деле), а refreshId получает другое (другое) значение. Таким образом, вы никогда не сможете очистить первый.

Самый простой способ избежать этого, чтобы попытаться очистить интервал перед каждым setInterval() вызова:

stopinterval(); 
refreshId = setInterval(...) 

В общем, это может быть хорошей идеей, чтобы сохранить каждый новый интервал в другой переменной, может быть внутри глобально доступный объект, чтобы вы могли управлять идентификаторами по своему усмотрению. Что-то вроде:

myIntervals.push({"button1": setInterval(...)});