jquery兩個setInterval相互衝突

Question

我有一個圖像映射鏈接到隱藏的divs。我希望圖像地圖中的項目突出顯示，並且與該區域對應的隱藏div也顯示出來。

我正在使用imagemapster.js來突出顯示地圖中的區域。要循環顯示我使用的亮點：

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

它很好用。但是，當我通過隱藏層的代碼添加到循環是：

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

然後然後，而不是1遞增它遍歷每個選擇其他項目。

有沒有辦法將這兩個函數合併爲一個，這樣他們就可以一次一個地增加一個，同時又可以增加一個？

Answer 1

您應該使用兩個獨立的計數器，以避免干擾和兩個 不同$(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); 
}