setInterval bloque mon script?

Question

Je fais une bibliothèque de curseurs et je suis confus à propos du fait que je peux utiliser mon objet (j'ai utilisé le modèle de module) juste une fois. Laissez-moi vous montrer:

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

et mes main.js

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

En fait, juste récipient avec 'fade-soi' classe glissait, 'fade-auto' est arrêté. Est-ce parce que javascript a un thread et que setInterval bloque une autre action PapaSlide? J'ai consolé dans les options de la console et ils ont des options que je tape dans les arguments, donc ..? Devrais-je utiliser quelque part clearInterval? Mais ces curseurs sont infinitifs, donc je pense que je ne peux pas.

ÉDITER

OK. J'ai fait quelque chose comme ça. J'ai supprimé() de la fonction IFFE. A vient de taper:

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

Est-ce une bonne solution?

Answer 1

Sur une ligne, votre deuxième appel à PapaSlide.setPapaSlider remplace votre premier appel.

Vous appelez setPapaSlider deux fois, chaque fois avec des options différentes. La première ligne dans le corps de la fonction est:

_options = _setOptions(opt) 

donc la première fois que vous l'appelez-vous enregistrer les options pour 'fade-auto' dans la variable _options et la deuxième fois que vous l'appelez, vous avez remplacée avec les options pour 'fade-self'. Idem pour le reste de la variable portée dans la fonction PapaSlide.

Answer 2

Si vous gardez PapaSlide en fonction simple comme:

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

Vous pouvez aller de l'avant et faire:

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

Avec cela, chaque appel à PapaSlider crée un champ propre et le rendement une interface publique ayant setPapaSlider.

Votre code par opposition à ce qui crée une interface publique {setPapaSlider: Function} et applique new à ce qui ne semble pas bon pour me

Si vous utilisez es6, vous pouvez simplifier et rendre plus lisible à l'aide class.