Bootstrap Ajax Registerkarte aktualisieren aktuelle

Question

Ich versuche, eine Bootstrap Ajax Registerkarte zu implementieren, wo eine Registerkarte angezeigt wird der Inhalt auf dieser Registerkarte aktualisiert jede Minute oder so, aber wenn ich eine andere Registerkarte auswählen das erste Intervall wird weiterhin aktualisiert und nie zurückgesetzt die neu angeklickte Registerkarte.

$('#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

Jedes Mal, wenn Sie auf eine Registerkarte klicken Sie die Variable erneut deklarieren:

var myVar; 

Auf diese Weise können Sie den alten Wert verlieren wird und so können Sie das Timeout nicht löschen.

Definieren Sie die Variable außerhalb der Funktion.

Eine andere Lösung, die keine globalen Variablen

Statt eine globale Variable zu verwenden, ist es möglich, den Wert als Datenwert an die Vorfahren UL und den aktuellen Anker mit Bezug zu speichern.

Nehmen wir an, wir müssen nur die erste Registerkarte behandeln. Wir können die Intervallzeit mit dem ersten Anker befestigen:

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

Auf diese Weise ist es stattdessen zu beheben in dem Code, den wir die Möglichkeit haben, sich dynamisch zu ändern.

Im Event-Handler können wir die Intervall-ID vom UL-Vorfahren erhalten/setzen und diesen Wert verwenden.

Um diese Operationen zu tun, können Sie:

.data() und .removeData().

Im folgenden ein einfaches Snippet:

$('#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>