如何清除單擊元素的間隔

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數據（）），但無法弄清楚如何做到這一點做呢？

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. 覺得挺辛苦關於使用閃爍功能。它是突兀的，經常煩人，能帶來健康問題的癲癇患者。