自举ajax选项卡刷新当前

问题描述:

我试图实现一个引导ajax选项卡,其中显示选项卡此选项卡中的内容每分钟刷新一次左右,但是,当我选择另一个选项卡时,第一个间隔继续刷新并且不会重置为新点击的标签。自举ajax选项卡刷新当前

$('#myTabs a').on('shown.bs.tab', function (e) { 
    var myVar; 
    var current_tab = e.target; 
    clearInterval(myVar); 
    myVar = setInterval(function(){ 
    $.ajax({ 
    url: current_tab 
    , cache: false 
    , success: function(html) {  
    $("#ajax-content").empty().append(html); 
    } 
    }); 
}, 60 * 1000); 
}); 

每当你点击你一个选项卡上的重新声明变量:

var myVar; 

这样你将失去原来的值,所以你不能清除超时。

定义函数外部的变量。

不同的解决方案,没有全局变量

而不是使用全局变量是可能的值保存为相关的祖先UL和当前锚的数据值。

我们假设我们只需要处理第一个选项卡。我们可以连接到第一锚的间隔时间:

<a data-interval="3000" ..... 

通过这种方式,而不是修复它,我们必须动态地改变它的可能性的代码。

在事件处理程序中,我们可以从UL祖先获取/设置间隔ID并使用此值。

为了完成这些操作,您可以使用:

.data().removeData()

在下面的一个简单的片段:

$('#myTabs a').on('shown.bs.tab', function (e) { 
 
    // 
 
    // get current intervalId if any 
 
    // 
 
    var myVar = $(e.target).closest('ul').data('intervalid'); 
 
    if (myVar !== undefined) { 
 
     // 
 
     // clear it 
 
     // 
 
     clearInterval(myVar); 
 
     $(e.target).closest('ul').removeData('intervalid'); 
 
     console.log('interval ' + myVar + ' cleared!!') 
 
    } 
 
    var current_tab = e.target.href; 
 
    // 
 
    // get current interval duration if any 
 
    // 
 
    var intervalDuration = $(e.target).data('interval'); 
 
    if (intervalDuration === undefined) { 
 
     // 
 
     // with no interval duration .... no action 
 
     // 
 
     return; 
 
    } 
 
    myVar = setInterval(function(){ 
 
     console.log('interval ' + myVar + ' running!!') 
 
     $.ajax({ 
 
      url: current_tab 
 
      , cache: false 
 
      , success: function(html) { 
 
       $("#ajax-content").empty().append(html); 
 
      } 
 
     }); 
 
    }, intervalDuration); 
 
    // 
 
    // save interval ID.. 
 
    // 
 
    $(e.target).closest('ul').data('intervalid', myVar); 
 
    console.log('new interval ' + myVar + ' saved!!') 
 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<div> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist" id="myTabs"> 
 
     <li role="presentation" class="active"><a data-interval="3000" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
     <div role="tabpanel" class="tab-pane active" id="home">home</div> 
 
     <div role="tabpanel" class="tab-pane" id="profile">profile</div> 
 
     <div role="tabpanel" class="tab-pane" id="messages">messages</div> 
 
     <div role="tabpanel" class="tab-pane" id="settings">settings</div> 
 
    </div> 
 
</div>