Question

我试图实现一个引导程序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和当前锚点相关的数据值。

我们假设我们只需要处理第一个标签。我们可以将间隔时间附加到第一个锚点：

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

通过这种方式，我们可以动态地改变它，而不是在代码中修复它。

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

为了执行这些操作，您可以使用：

.data()和.removeData()。

以下是一个简单的片段：

＆＃13;

$('#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!!')
});

＆＃13;

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

＆＃13;

Bootstrap ajax选项卡刷新当前

1 个答案: