Question

我一直在努力弄清楚如何做到这一点并没有真正得到任何结果。我需要在单击按钮时暂停以下功能，并在第二次单击时再次启动它。

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（）有关，但我并不真正理解使其工作的语法或方法。任何人都可以帮我理解吗？非常感谢你:)）

Answer 1

尝试这样的事情（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>

单击按钮时暂时暂停功能

1 个答案: