setInterval이 내 스크립트를 차단하고 있습니까?

Question

나는 슬라이더 라이브러리를 사용하고 있으며, 실제로 객체 (모듈 패턴 사용)를 한 번 사용할 수 있다는 사실에 대해 혼란 스럽다. 내가 당신을 보여 드리죠 :

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

를, '페이드 자체를'클래스 단지 컨테이너는 정지 '페이드 자동', 슬라이딩된다. 이것은 자바 스크립트가 하나의 스레드를 가지고 있기 때문에 setInterval이 다른 PapaSlide 액션을 차단하고 있기 때문입니까? 나는 콘솔 옵션에서 콘솔을 사용했고 옵션에 인수를 입력 했으므로 ...? clearInterval 어딘가 사용해야합니까? 하지만이 슬라이더는 부정사 적이기 때문에 나는 그럴 수 없다고 생각합니다.

편집

확인. 나는 이런 것을했다. IFFE 함수에서 삭제했습니다. 그냥 입력 :

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

이 좋은 해결책이 있습니까?

Answer 1

한 줄에 PapaSlide.setPapaSlider의 두 번째 호출이 첫 번째 호출을 재정의합니다.

다른 옵션을 사용할 때마다 setPapaSlider 번을 두 번 호출합니다. 함수 본문의 첫 번째 줄은 다음과 같습니다

이

_options = _setOptions(opt) 

그래서 당신이 전화를 처음으로 당신이 _options 변수 당신이 전화를 두 번째 시간에 'fade-auto'에 대한 옵션을 저장, 당신은 옵션으로 그것을 무시했습니다 'fade-self'. PapaSlide 범위의 나머지 변수에 대해서도 동일합니다. 당신은 같은 간단한 함수로 PapaSlide을 유지하는 경우

Answer 2

는 :

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.