如何清除点击元素的间隔

Question

我正在使用http://www.antiyes.com/jquery-blink-plugin在我的文档上闪烁图像.

该插件的代码是

(function($)
{
  $.fn.blink = function(options)
  {
     var defaults = { delay:500 };
     var options = $.extend(defaults, options);

     return this.each(function()
     {
        var obj = $(this);
        setInterval(function()
        {
            if($(obj).css("visibility") == "visible")
            {
                $(obj).css('visibility','hidden');
            }
            else
            {
                $(obj).css('visibility','visible');
            }
        }, options.delay);
    });
  }
}(jQuery))

但是,当我点击它时,我想停止闪烁特定图像.目前我通过修改代码如下操作

    (function($) {
        $.fn.blink = function(options) {
            var defaults = { delay: 500, blinkClassName: 'blink' };
            var options = $.extend(defaults, options);

            return this.each(function() 
            {
                var obj = $(this);

                setInterval(function() 
                {
                    if ($(obj).attr('class').indexOf(options.blinkClassName) > -1) 
                    {
                        if ($(obj).css("visibility") == "visible")
                        {
                            $(obj).css('visibility', 'hidden');
                        }
                        else 
                        {
                            $(obj).css('visibility', 'visible');
                        }
                    }
                    else 
                    {
                        if ($(obj).css("visibility") != "visible") 
                        {
                            $(obj).css('visibility', 'visible');
                        }
                    }
                }, options.delay);
            });
        }
    } (jQuery))  

我认为必须有一些更好的方法(可能使用jquery data()),但无法弄清楚如何做到这一点？

Answer 1

jQuery的data方法很容易使用.这里的关键事实是setInterval返回一个值.该值是标识间隔的数字.您可以提供此标识符clearInterval以停止发生间隔.

所以你的代码看起来像这样:

return this.each(function()
{
    var obj = $(this);
    var intervalID = setInterval(function()
    {
        var isVisible = obj.data('blink-visible');
        obj
           .css('visibility', isVisible ? 'hidden' : 'visible')
           .data('blink-visible', !isVisible);
    }, options.delay);
    obj.data('blink-interval', intervalID);
});

然后你可以制作一个stopBlink方法:

$.fn.stopBlink = function() {
    return this.each(function() {
        var $el = $(this);
        var intervalID = $el.data('blink-interval');
        if (intervalID) {
            clearInterval(intervalID);
            $el.removeData('blink-interval');
            $el.css('visibility', 'visible');
        }
    });
};

其他几点说明:

1. .css('visibility', 'visible')这是一种冗长的方式.您可以使用以下toggle方法:如果元素当前可见,则隐藏元素,如果元素被隐藏则显示该元素.这就是我上面所做的.
2. 你不需要包装obj在$(). obj已经是一个jQuery选择(它是用它创建的$(this),所以额外的包装是完全没必要的.
3. 想一想使用闪烁功能.它是突兀的,经常令人讨厌,并且可能对癫痫患者产生健康影响.