Question

我正在做滑块库，我很困惑我只能使用我的Object（我使用的模块模式）这一事实。让我告诉你：

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应用于 me

如果您使用es6，则可以使用class简化此操作并使其更具可读性。

setInterval阻止了我的脚本？

2 个答案: