如何使这个滑块在最后的滑梯停止？

Question

我有一个旋转木马文本自动播放不停止。有什么办法能让它在最后一刻停止吗？这是代码http://codepen.io/anon/pen/kyiqn

(function () {
    rt.Homepage = function () {
        function e() {
            var e = this;
            this.currentCaption = 0, this.$carousel = $(".js-carousel"), this.$captions = $(".js-captions"), this.switchCaption(1), setInterval(function () {
                return e.advanceCaption()
            }, 2000), this.addHandlers()
        }
        return e.prototype.addHandlers = function () {}, 

        e.prototype.advanceCaption = function () {
            var e, t;
            return this.currentCaption++, t = 20, e = this.currentCaption % t + 1, this.switchCaption(e)
        }, e.prototype.switchCaption = function (e) {
            var t, n, r, i, s, o, u = this;
            n = "state-1 state-2 state-3 state-4 state-5 state-6 state-7 state-8 state-9 state-10 state-11 state-12 state-13 state-14 state-15 state-16 state-17 state-18 state-19 state-20", this.$carousel.removeClass(n).addClass("state-" + e), o = this.$captions;
            for (i = 0, s = o.length; i < s; i++) t = o[i], r = $(".caption-" + e, t).width(), $(t).width(r);
            return _.delay(function () {
                return u.$carousel.addClass("show-caption")
            }, 500)
        }, e
    }(), $(function () {
        return new rt.Homepage
    })
}).call(this);

Answer 1

我编辑了它来做您想做的事情，并且使javascript (稍微)更清晰，这样您就可以看到正在发生的事情。如果您有非最小化的javascript，我建议您做类似的编辑。

CodePen

(function () {
    rt.Homepage = function () {
        function e() {
            var e = this;
            this.currentCaption = 0;
            this.$carousel = $(".js-carousel");
            this.$captions = $(".js-captions");
            this.switchCaption(1);

            // set a variable for the interval, so we can stop it later
            this.interval = setInterval(function () {
                return e.advanceCaption()
            }, 1500);

            this.addHandlers();
        }

        e.prototype.addHandlers = function () {}

        e.prototype.advanceCaption = function () {
            this.currentCaption++;

            // if currentCaption reaches final caption, stop the interval
            if (this.currentCaption >= 4) {
                clearInterval(this.interval)
            }

            return this.switchCaption(this.currentCaption + 1);
        }

        e.prototype.switchCaption = function (e) {
            var t, n, r, i, s, o, u = this;
            n = "state-1 state-2 state-3 state-4 state-5";
            this.$carousel.removeClass(n).addClass("state-" + e);
            o = this.$captions;
            for (i = 0, s = o.length; i < s; i++) t = o[i];
            r = $(".caption-" + e, t).width(), $(t).width(r);
            return _.delay(function () {
                return u.$carousel.addClass("show-caption")
            }, 500)
        }

        return e;
    }(), $(function () {
        return new rt.Homepage
    })
}).call(this);