单击按钮时暂时暂停功能

问题描述：

我一直在试图解决如何做到这一点，并没有真正得到任何地方。点击按钮时，我需要暂停下面的功能，再次点击时再次启动它。单击按钮时暂时暂停功能

var About = function(dom) { 
    this.text_spans = $('li', dom); 
    this.len = this.text_spans.length; 
    this.index = 0; 

    this.init(); 

} 

$.extend(About.prototype, { 
    interval: 2.5 * 1000, 
    init: function() { 
     var that = this; 
     setTimeout(function() { 
      that.text_spans.eq(that.index++ % that.len).removeClass('visible'); 
       that.text_spans.eq(that.index % that.len).addClass('visible'); 
      setTimeout(arguments.callee, that.interval); 
     }, that.interval); 
    } 
});

此功能的目的是隐藏的一系列文本（例如，在li“S）和与环回圆形无限。点击按钮/链接时，该功能将暂停并停止更改文本。

我知道这与setTimeout()和clearTimeout（）有关，但我并不真正了解使其工作的语法或方法。任何人都可以帮助我理解它吗？非常感谢你:)

能否请您分享的jsfiddle演示，它将使我们更容易帮助你:) – Mottie 2013-04-24 22:01:20

当然，对不起，我忘了。以下是链接：http://jsfiddle.net/Xb5Xg/1/ – 2013-04-24 22:08:54

答

尝试这样的事情（demo）：

$.extend(About.prototype, { 
    interval: 2.5 * 1000, 
    init: function() { 
     var that = this; 
     $('a.toggle').click(function(){ 
      var running = $(this).hasClass('running'); 
      $(this).toggleClass('running', !running); 
      if (running){ 
       clearInterval(that.timer); 
      } else { 
       that.timer = setInterval(function() { 
        that.text_spans.eq(that.index++ % that.len).removeClass('visible'); 
        that.text_spans.eq(that.index % that.len).addClass('visible'); 
       }, that.interval); 
      } 
     }).click(); // start timer 
    } 
});

HTML

<a class="toggle" href="#">Click me to pause function</a>

单击按钮时暂时暂停功能

相关推荐