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

事實上，與「褪色自」類只是容器滑動，「淡出汽車」停止。這是因爲JavaScript有一個線程和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) 

所以你第一次把它保存選項'fade-auto'在_options變量，你怎麼稱呼它第二次，你已經與選項覆蓋它'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}和適用new它如果您正在使用es6你可以簡化這個並通過更具可讀性看起來並不好我

您的代碼class。