自举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并使用此值。
为了完成这些操作,您可以使用:
在下面的一个简单的片段:
$('#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>