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。