javascript - 清除 jQuery 插件中的间隔

Question

我有一个非常简单的插件，可以在一段文本中添加点，即

Loading.
Loading..
Loading...
Loading.

等等

这是我的代码(http://codepen.io/EightArmsHQ/pen/waGzJb?editors=001):

$.fn.dotdotdots = function(options) {

  var settings = $.extend({
    speed: 300,
    dot_max: 3,
    reset: 0,
    string: '.'
  }, options );

  var default_text = this.text();
  var target = this;
  var dot_count = 0;

  setInterval(function(){

    var dots = '';

    for(var i = settings.reset; i < dot_count; i ++){
      dots += settings.string;
    }

    dot_count ++;
    if(dot_count > settings.dot_max){
      dot_count = settings.reset;
    }

    target.text(default_text + dots);
  }, settings.speed);

  return this;

};

$("#target").dotdotdots({'speed':400});

问题是，过了一段时间，我想从插件外部停止setInterval。我立即想到的是在函数内部尝试:

this.intId = setInterval(function(){

然后我可以使用类似的东西:

clearInterval($("#target").intId);

从外部停止插件执行其操作。但这并不能解决问题...任何人都可以指出我正确的方向吗？

说实话，我想知道是否需要使插件变得更复杂一点，并以某种方式使用 .start() 和 .stop() 函数。

Answer 1

您需要访问 setInterval 变量，因此将间隔分配给全局(插件内部)变量:

$.fn.dotdotdots.Interval = setInterval(...)

然后你可以清除它:

clearInterval($.fn.dotdotdots.Interval)