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

Question

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?

Answer 1

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:

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