Question

我正在使用this Codrops Blueprint来创建引号旋转器。我修改了旋转器以使用下一个按钮，由下面的代码驱动：

    _startRotator: function() {

        if (this.support) {
            this._startProgress();
        }

        var timeout = setTimeout($.proxy(function() {
            if (this.support) {
                this._resetProgress();
            }
            this._next();
            this._startRotator();
        }, this), this.options.interval);

        $(".testimonial-next").click($.proxy(function() {
            clearTimeout(timeout);
                            if (this.support) {
                this._resetProgress();
            }
            this._next();
            this._startRotator();

        }, this));
    },

我在setTimeout函数下添加了.click函数，并将var添加到setTimeout函数中。

单击.testimonial-next时，将重置旋转器的计时器，并立即执行计时器中的代码。据我所知，计时器会自动重启，所以我不必添加代码来执行此操作。

在the website where this is put to use上（请参阅“推荐”部分），似乎存在问题。应该有五个引号，按Kim，Lynn，Shannon，Jennifer和Chris的顺序排列。如果计时器运行而没有被中断，一切都按预期工作。如果单击“下一步”按钮，则似乎会跳过某些引号。其他时候，报价会停止旋转或高速随机旋转。

我做错了什么？

Answer 1

您的按钮点击处理程序会一次又一次地附加到该按钮，在相同代码的多次执行中点击结果。

要解决此问题，您最好将这段代码移出_startRotator函数，并将其移动到仅执行一次的位置。

这样，当你点击时，只会有一个处理程序被执行。

不太好，但也是一个解决方案，就是将代码保留在原来的位置，但在再次附加之前，请先删除所有现有的点击处理程序：

    $(".testimonial-next").off('click').on('click', $.proxy(function() {
        // etc...

但这确实是一个丑陋的解决方案。尝试移动代码。

我在引号rotator

1 个答案: