多個滑塊由一個觸發功能返回的setInterval衝突

Question

我試圖創建一個滑塊功能，對文件的多個移動元件。在setInverval值卡住。

Here is testing jsFiddle.

Works perfect when its just one.

function repSlider(target) { 
     target = $(target); 
     targetEl = target.find('.drop_leds'); 
     targetEl.hide().first().addClass('active').show(); 
     totalEl = targetEl.length-1; 

     setInterval(function() { 
      curEl = target.find('.active.drop_leds').index(); 
      curEl == totalEl ? curEl = 0 : curEl += 1; 
      console.log(curEl);//this gives bug 
      targetEl.hide().removeClass('active') 
      .eq(curEl).addClass('active').fadeIn(444); 
     },3000); 

} 

repSlider('.targetClassA'); 
repSlider('.targetClassB'); 

還試圖用不同的方法，但結果是相同的。

$.fn.repSlider = function() { 
     target = $(this); 
     targetEl = target.find('.sliderEl'); 
     targetEl.hide().first().addClass('active').show(); 
     totalEl = targetEl.length-1; 

     return window.setInterval(function() { 
      curEl = target.find('.active.sliderEl').index(); 
      curEl == totalEl ? curEl = 0 : curEl += 1; 
      console.log(curEl);//this gives bug 
      targetEl.hide().removeClass('active') 
      .eq(curEl).addClass('active').fadeIn(444); 

    },3000); 
} 

$('.repSliderA').repSlider(); 
$('.repSliderB').repSlider(); 

Answer 1

與功能越來越setInverval瞭解決：

Here is working jsFiddle.

$('.targetClassA > div').hide().first().addClass('active').show(); 
$('.targetClassB > div').hide().first().addClass('active').show(); 
function repSlider(target) { 
    target = $(target); 
    targetEl = target.find('.drop_leds'); 
    totalEl = targetEl.length-1; 

    curEl = target.find('.active.drop_leds').index(); 
    curEl == totalEl ? curEl = 0 : curEl += 1; 
    console.log(curEl);//this gives bug 
    targetEl.hide().removeClass('active') 
    .eq(curEl).addClass('active').fadeIn(444); 

} 

var repSliderAInt = setInterval(function() { 
    repSlider('.targetClassA'); 
},3000); 
var repSliderBInt = setInterval(function() { 
    repSlider('.targetClassB'); 
},3000);