自舉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); 
});

來源

2017-07-26 Spufferoo

每當你點擊你一個選項卡上的重新聲明變量：

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>

來源

2017-07-26 14:33:22 gaetanoM

自舉ajax選項卡刷新當前

回答

相關問題