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)

Answer 2

只有在满足条件时才需要使用setInterval和clearInterval创建变量。

一个例子：

var myInterval = 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);

if(true) clearInterval(myInterval);

清除jQuery插件中的间隔

2 个答案: