如何让多个 Javascript setInterval 函数在同一页面上很好地协同工作？

Question

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

这些功能本身似乎运行良好，但是当我尝试在同一页面中包含多个功能时，时间和效果都会变得混乱，并且无法正确渲染或完成！

我在 stackOverflow 和 google 上进行了一些搜索，从我收集到的信息来看，问题是 setInterval 充当 window 对象的“全局”方法/属性，所以当我在页面上有多个时，它们最终会相互覆盖！

这是正确的吗？如果是这样，解决方案是什么？ jQuery/插件如何管理自己独特的间隔函数？

我想知道是否可以将“本地”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 = ...。与父级相同。另请注意，在 $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。也许这取决于您如何单独管理其中的每一个。您有任何代码可以向我们展示吗？