jquery - 如何清除点击元素的间隔

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. 认真考虑使用眨眼功能。它很唐突且经常令人烦恼，并且可能对癫痫患者产生健康影响。