Jquery Two setInterval Konflikt miteinander

Question

Ich habe eine Image Map, die mit versteckten divs verknüpft ist. Ich möchte, dass das Element in der Imagemap hervorgehoben wird und das versteckte div für diesen Bereich ebenfalls angezeigt wird.

Ich verwende imagemapster.js, um die Bereiche in der Karte hervorzuheben. Um durch die Lichter zu gehen benutze ich das:

var $anchors = jQuery('area'), counter = 0; 
var timer = setInterval(function(A){ 
jQuery($anchors).mapster('deselect'); 
jQuery($anchors).eq(counter++ % $anchors.length).mapster('select'); 
}, 5000); 

Es funktioniert super. Aber wenn ich den Code, um durch die versteckte divs hinzufügen, die ist:

var $text = jQuery('.visible'), counter = 0; 
var timertwo = setInterval(function(B){ 
jQuery($text).addClass('hidden'); 
jQuery($text).eq(counter++ % $text.length).removeClass('hidden'); 
}, 5000); 

Dann dann statt Schritten von 1 es Schleifen durch jede andere Option ausgewählt haben.

Gibt es eine Möglichkeit, diese beiden Funktionen zu einem zusammenzufassen, so dass sie nacheinander und gleichzeitig inkrementieren?

Answer 1

Sie sollten zwei getrennte Zähler verwenden um Störungen zu vermeiden und zwei verschiedenen $(function(){...});

$(function() { 
    var $anchors = jQuery('area'), counter1 = 0; 
    var timer = setInterval(function(A){ 
    jQuery($anchors).mapster('deselect'); 
    jQuery($anchors).eq(counter1++ % $anchors.length).mapster('select'); 
    }, 5000); 
} 
$(function() { 
    var $text = jQuery('.visible'), counter2 = 0; 
    var timertwo = setInterval(function(B){ 
    jQuery($text).addClass('hidden'); 
    jQuery($text).eq(counter2++ % $text.length).removeClass('hidden'); 
    }, 5000); 
}