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

Question

我正在开发一个使用 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 的奇怪限制，还是我做错了什么？

Answer 1

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

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

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

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