多次调用 jQuery 插件时 SetInterval 发生冲突

发布于 2024-11-30 04:32:06 字数 760 浏览 1 评论 0原文

我正在开发一个使用 SetInterval 的自定义 jQuery 插件，但是当它被多次调用时它就会中断。

我有这样的事情：

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

        var defaults = {};
        var options = $.extend(defaults, options);
    var interval;

        this.each(function() {
            //etc.
            interval = setInterval(function(){ doMyOtherFunc(options); }, 1000);
        });

        function doMyOtherFunc(options) {
            //etc
        }

    }
})(jQuery);

如果我调用它一次，功能就会按预期工作，但如果我在第二个元素上再次调用它，它就会中断。

$('#myelement').myplugin({'option1', 'option2'});
$('#myotherelement').myplugin({'option1', 'option2'});

不知何故，第二个实例中的间隔会覆盖前一个元素、数据和所有元素上的间隔。（但是传递的样式并没有搞砸。）这是 setInterval 的奇怪限制，还是我做错了什么？

原文

I'm working on a custom jQuery plugin that makes use of SetInterval, but it breaks when it's called more than once.

I have something sort of like this:

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

        var defaults = {};
        var options = $.extend(defaults, options);
    var interval;

        this.each(function() {
            //etc.
            interval = setInterval(function(){ doMyOtherFunc(options); }, 1000);
        });

        function doMyOtherFunc(options) {
            //etc
        }

    }
})(jQuery);

Functionality works as expected if I call it once, but if I call it again on a second element it breaks.

$('#myelement').myplugin({'option1', 'option2'});
$('#myotherelement').myplugin({'option1', 'option2'});

Somehow, the interval in the second instance overrides the one on the previous element, data and all. (But the styling passed doesn't get screwed up.) Is this a weird limitation of setInterval, or am I doing something wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一花一树开 2024-12-07 04:32:06

您必须使间隔句柄对每个元素都是私有的。为此，您可以使用 $.data：

    this.each(function() {
        var interval = setInterval(function(){ doMyOtherFunc(options); }, 1000);
        $(this).data('myplugin-interval', interval);
    });

并且您可以通过以下方式检索间隔：

$(this).data('myplugin-interval');

You have to make the interval handle private to each element. For this, you could use $.data:

    this.each(function() {
        var interval = setInterval(function(){ doMyOtherFunc(options); }, 1000);
        $(this).data('myplugin-interval', interval);
    });

And you could retrieve the interval this way: