在单击按钮时取消 ajax 的设置间隔

Question

我有一系列按钮，每个按钮我有一个单独的.click（function（） {

即

$("#approved").button().click(function() {
$("#waiting_approval").button().click(function() {
$("#department_waiting_approval").button().click(function() {
$("#department").button().click(function() {

我有 ajax 的 setInterval，它可以刷新该div 中的数据。我面临的问题是，一旦用户单击不同的按钮，我想停止当前按钮单击ajax调用并启动新按钮。

希望这是有道理的，提前感谢。

$("#approved").button().click(function() {
setInterval(function(){
    $.ajax({
  type: "GET",
  url: "holidays/academic_days.php?userid='+$('#approved_list').attr('class')",
  dataType: "html",
  success: function(data) {
    jQuery("#approved_list").fadeOut( 10 , function() {
        jQuery(this).html( data);
        $('#approved_list').show();  
    $('#waiting_approval_list').hide();
            $('#department_waiting_approval_list').hide();
            $('#department_logs').hide();
    }).fadeIn( 100 );
  }
 })
}, 100);
});

Answer 1

这可能会有所帮助：

var thisInterval;
$("#approved").button().click(function() {
   thisInterval=setInterval(function(){
        $.ajax({
      type: "GET",
      url: "holidays/academic_days.php?userid='+$('#approved_list').attr('class')",
      dataType: "html",
      success: function(data) {
        jQuery("#approved_list").fadeOut( 10 , function() {
            jQuery(this).html( data);
            $('#approved_list').show();  
        $('#waiting_approval_list').hide();
                $('#department_waiting_approval_list').hide();
                $('#department_logs').hide();
        }).fadeIn( 100 );
      }
     })
    }, 100);
    });

像这样制作取消按钮。

$("#cancel").button().click(function() {clearInterval(thisInterval)}

Answer 2

setInterval 函数返回该间隔对象的处理程序，该处理程序稍后可用于使用 clearInterval 清除该间隔，例如：

    var handler = setInterval(function(){
      console.log('interval');
    },1000);
    setTimeout(function(){
      clearInterval(handler);
    },5000);