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

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

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

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

你可以这样检索间隔:

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