jquery - Bootstrap ajax 选项卡刷新当前

Question

我正在尝试实现一个 Bootstrap 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);
});

Answer 1

每当您单击选项卡时，都会重新声明变量:

var myVar;

这样您将丢失旧值，因此无法清除超时。

在函数外部定义变量。

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

可以将该值保存为与祖先 UL 和当前 anchor 相关的数据值，而不是使用全局变量。

假设我们只需要处理第一个选项卡。我们可以将间隔时间附加到第一个 anchor :

<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>