setIntervalがスクリプトをブロックしていますか？

Question

私はスライダーライブラリを行っています。私はオブジェクト（私はモジュールパターンを使用しています）を1回だけ使用できるという事実については混乱しています。私がお見せしましょう：

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); 

と私のmain.js

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

実は、「フェードイン自己」クラスを持つだけで、コンテナが「オートフェード」、スライドさが停止されます。 javascriptにはスレッドが1つあり、setIntervalは別のPapaSlideアクションをブロックしているためですか？私はコンソールのオプションでconsoledしていると私は引数を入力するオプションを持っているので、..？私はどこかでclearIntervalを使うべきですか？しかし、これらのスライダーは不規則なので、私はできないと思う。

編集

OK。私はこのようなことをしました。私はIFFE関数から削除しました。ちょうどタイプされた：

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

これは良い解決策ですか？

Answer 1

PapaSlide.setPapaSliderへの2度目の呼び出しは、最初の呼び出しを上書きします。

setPapaSliderには、それぞれ異なるオプションを使用して2回呼び出します。関数本体の最初の行は次のようになりますので、あなたが_options変数とあなたがそれを呼び出す2回目'fade-auto'するためのオプションを保存し、それを呼び出して初めて、あなたはのオプションでそれを

_options = _setOptions(opt) 

上書きしました'fade-self'。 PapaSlideのスコープ内の変数の残りは同じです。

Answer 2

あなたのような単純な関数としてPapaSlideを維持する場合：

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 
    } 
}; 

あなたが先に行くと行うことができます。これにより

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'}); 

、PapaSliderへの各呼び出しは、それ自身とリターンの範囲を作成します公開インタフェースはsetPapaSliderです。

これは、パブリックインターフェイス{setPapaSlider: Function}を作成し、これを単純化し、使用して読みやすくすることができ、あなたがes6を使用している場合私

に良い見ていないそれにnewを適用するとは対照的にあなたのコードclass。