更新

Question

我已经使用setInterval()为循环编写了一些自定义动画函数作为jQuery插件。

这些函数本身似乎工作得很好但是当我尝试在同一页面中包含多个函数时，时间和效果会搞得一团糟而且无法正确渲染或完成！

我已经在stackOverflow和google上做了一些侦察，我可以收集的问题是setInterval充当window对象的'全局'方法/属性，所以当我有在页面上不止一个，他们最终会互相覆盖！

这是对的吗？如果是这样，解决方案是什么？ jQuery / plugins如何管理自己独特的区间函数？

我想知道是否可以将'local'setInterval设置为我的每个插件对象的唯一属性？

- 或 -

如果我必须创建一个函数来管理来自各种不同插件/函数的多个动画调用，以便通过一个全局setInterval调用来处理它们 - 但我不知道如何执行此操作！

有人可以帮忙吗？

---- ----编辑

(function($){
    $.fn.scroller = function(options) {

        var defaults = {
            direction: 'left',
            distance: '',
            duration: 2000,
            interval: 2000,
            type: 'linear',
            startPos: '0'
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            parent = $(this).children('.scroller');
            $this = parent.children().first();

//          console.log(parent);
//          console.log($this);

            var o = options;
            var m = '';

            if(o.direction === 'left') m = 'marginLeft';
            if(o.direction === 'right') m = 'marginRight';
            if(o.direction === 'up') m = 'marginTop';
            if(o.direction === 'down') m = 'marginBottom';

//          console.log('Distance: ' + o.distance);
//          console.log('Duration: ' + o.duration);
//          console.log('Type: ' + o.type);
//          console.log('Start Pos: ' + o.startPos);
//          console.log('Interval: ' + o.interval);

            setInterval(function(){
                $this.animate({
                    m : o.distance
                },
                o.duration,
                o.type,
                function() { // OnComplete
                    $this.stop().css(m, o.startPos).appendTo(parent);
                });
            }, o.duration+o.interval);
        });
    };
})(jQuery);

Answer 1

更新

我想我看到了问题。您将$ this定义为全局变量。因此，对setInterval的调用都将使用相同的$ this变量。试试var $this = ...。 parent也是如此。另请注意，在$this.animate的回调中，“this”应该引用已设置动画的dom元素，因此您可以执行$（this）来获取jQuery对象。

我认为您的问题可能是您使用setInterval松散了上下文。 this对象可能不是您期望的那样。如果您希望存在一个变量（因为它是在您调用setInterval的位置附近定义的），它可能不会出现。

闭包可能会对您有所帮助。试试

setInterval(function(){
    //code here
});

而不是

setInterval(myPreDefinedFunction);

另外，尝试确保在setInterval回调中使用本地定义的变量而不是全局变量：

var myVar = 5;

而不是

myVar = 5;

如果使用第二种方法，最终会在回调之间共享变量。

Answer 2

setInterval确实是全局的，但每次调用setInterval都会返回一个唯一的ID，您可以使用它来引用它，即clearInterval（）。应该为每个需要它自己的间隔的插件分配它自己的变量来包含用于引用的ID。也许这取决于你如何单独管理每一个。你有任何代码可以告诉我们吗？

如何让多个Javascript setInterval函数在同一页面上很好地一起播放？

2 个答案:

更新