setInterval blockiert mein Skript?

Question

Ich mache Slider-Bibliothek und ich bin verwirrt über Tatsache, dass ich mein Objekt (ich verwendete Modul-Muster) nur einmal verwenden kann. Lassen Sie mich Ihnen zeigen:

let PapaSlide = (function(d) { 
    'use strict'; 
    let _options = {}, _container, _items, _actIndex, _prevIndex; 
    let _setOptions = function(opt) { 
     return { 
      container: opt.container || 'papa-container', 
      items: opt.items || 'papa-item', 
      transitionDuration: opt.transitionDuration || '300', 
      transitionFunction: opt.transitionFunction || 'ease-in', 
      timeInterval: opt.timeInterval || '3000', 
      animationType: opt.animationType || 'fade', 
      type: opt.type || 'auto', 
      startAt: opt.startAt || 0 
     } 
    }; 
    let _setIndexes = function() { 
     _options.startAt = _options.startAt > _items.length - 1 ? 0 : _options.startAt; 
    _actIndex = _options.startAt; 
    _prevIndex = (_actIndex === 0) ? _items.length - 1 : _actIndex - 1; 
    }; 
    let _addTransitionStyle = function() { 
     _items.forEach(item => { 
      item.style.transitionDuration = `${_options.transitionDuration}ms`; 
      item.style.transitionTimingFunction = _options.transitionFunction; 
     }); 
    }; 
    let _sliderType = function() { 
     _setIndexes(); 
     if(_options.animationType === 'fade' && _options.type === 'auto') { 
      _autoFade(); 
     } 
    }; 
    let _autoFade = function() { 
     _items[_actIndex].style.opacity = 1; 
     setInterval(() => { // is this blocking my other sliders? 
      _prevIndex = _actIndex; 
      _actIndex++; 
      if(_actIndex > _items.length - 1) { 
       _actIndex = 0; 
      } 
      _items[_prevIndex].style.opacity = 0; 
      _items[_actIndex].style.opacity = 1; 
     }, parseInt(_options.timeInterval)); 
    }; 
    let setPapaSlider = function(opt) { 
     _options = _setOptions(opt); 
     _container = d.getElementsByClassName(_options.container)[0]; 
     if(_container) { 
      _items = Array.prototype.slice.call(_container.getElementsByClassName(_options.items)); 
      if(_items.length > 0) { 
       _addTransitionStyle(); 
       _sliderType(); 
      } 
      else { 
       console.error('Items have been not found'); 
      } 
     } 
     else { 
      console.error('Container has been not found'); 
     } 
    }; 

    return { 
     setPapaSlider: setPapaSlider 
    } 
})(document); 

und meine main.js

(function(PapaSlide) { 
    "use strict"; 
    PapaSlide.setPapaSlider({container: 'fade-auto', timeInterval: '1200'}); 
    PapaSlide.setPapaSlider({container: 'fade-self', timeInterval: '2000'}); 
})(PapaSlide || {}); 

Eigentlich mit nur Container 'Fade-Selbst' Klasse gleitet, 'Fade-auto' gestoppt wird. Liegt das daran, dass Javascript einen Thread hat und setInterval eine andere Aktion von PapaSlide blockiert? Ich habe Konsolenoptionen getröstet und sie haben Optionen, die ich in Argumente eintippe, also ..? Sollte ich irgendwo clearInterval verwenden? Aber diese Schieberegler sind unendlich, also denke ich, dass ich nicht kann.

EDIT

OK. Ich habe so etwas gemacht. Ich habe() von der IFFE-Funktion gelöscht. A nur typisierte:

let fade1 = new PapaSlide(); 
fade1.setPapaSlide({container: 'fade-auto'}); 
let fade2 = new PapaSlide(); 
fade2.setPapaSlide({container: 'fade-self'}); 

Ist das eine gute Lösung?

Answer 1

In einer Zeile überschreibt Ihr zweiter Anruf bei PapaSlide.setPapaSlider Ihren ersten Anruf.

Sie rufen setPapaSlider zweimal, jedes Mal mit verschiedenen Optionen. Die erste Zeile in der Funktionskörper ist:

_options = _setOptions(opt) 

so das erste Mal, wenn Sie es Sie die Optionen für 'fade-auto' in der _options Variable und das zweite Mal Sie es nennen speichern nennen, haben Sie es mit den Optionen außer Kraft gesetzt für 'fade-self'. Dasselbe gilt für den Rest der Variablen, die in der -Funktion definiert ist.

Answer 2

Wenn Sie PapaSlide als eine einfache Funktion halten wie:

let PapaSlide = function(d) { 
    'use strict'; 
    let _options = {}, _container, _items, _actIndex, _prevIndex; 
    let _setOptions = function(opt) { 
    }; 
    let _setIndexes = function() { 
    }; 
    let _autoFade = function() { 
    }; 
    let setPapaSlider = function(opt) { 
    }; 

    return { 
     setPapaSlider: setPapaSlider 
    } 
}; 

können Sie voran gehen und zu tun:

let fade1 = PapaSlide(document); //can get rid of document if you are not using it 
fade1.setPapaSlide({container: 'fade-auto'}); 
let fade2 = PapaSlide(document); 
fade2.setPapaSlide({container: 'fade-self'}); 

Damit jeder Aufruf PapaSlider schafft einen Rahmen seiner eigenen und kehrt eine öffentliche Schnittstelle mit setPapaSlider.

Ihr Code im Gegensatz zu dieser {setPapaSlider: Function} eine öffentliche Schnittstelle erstellt und gilt new es, die nicht gut

zu mich sieht Wenn Sie es6 verwenden Sie diese vereinfachen könnte und es besser lesbar, indem Sie machen class.