Jquery 单击按钮时暂时暂停功能

我一直在想如何做到这一点，但实际上没有取得任何进展。我需要在单击按钮时暂停下面的功能，并在第二次单击时再次启动它

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

中）并无限循环。单击按钮/链接时，功能将暂停并停止更改文本

我知道这与

setTimeout（）

和clearTimeout（）有关，但我并不真正理解让它工作的语法或方法。有人能帮我理解吗？非常感谢：）

试试这样的方法（）：

HTML

请您在JSFIDLE上分享一个演示，这样我们可以更容易地帮助您：）当然，对不起，我忘了。以下是链接：

$.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
    }
});

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