Question

在我的特定代码中，我正在制作旋转木马......箭头功能正常工作并正确地取消了间隔，因此没有函数有错误但是setInterval进行默认旋转会导致错误。只要在箭头上单击，呈现的幻灯片将更改并正确清除间隔（防止错误）并在焦点（）期间重置它，但是默认情况下没有单击，而不是每3秒自动滑动它将在控制台中显示错误，说明.unfocus不是函数...但是click eventListeners正确执行该函数...是否存在setInterval和this.goRight的范围问题 - ＆gt; this.unfocus？我不知道如何解决此错误，或导致它的原因。所有的帮助表示赞赏：D

class Carousel {
    constructor(element) {
        this.element = element;
        this.slide = this.element.querySelectorAll('.Carousel__item');
        this.left = this.element.querySelector('.Carousel__arrow-left');
        this.left.addEventListener('click', () => { this.goLeft() });
        this.right = this.element.querySelector('.Carousel__arrow-right');
        this.right.addEventListener('click', () => { this.goRight() });
        this.current = 0;
        this.focus();
    }

    unfocus() {
        clearInterval(this.interval);
        this.slide[this.current].classList.remove('Carousel__item-focused')
    }

    focus() {
        this.slide[this.current].classList.add('Carousel__item-focused')
        this.interval = setInterval(this.goRight, 3000);
    }

    goLeft() {
        this.unfocus();
        this.current = ((this.current + 2) % 3);
        this.focus();
    }

    goRight() {
        this.unfocus();
        this.current = ((this.current + 1) % 3);
        this.focus();
    }
}

let carousels = document.querySelectorAll(".Carousel");
carousels = Array.from(carousels).map(carousel => new Carousel(carousel));

Answer 1

尝试将上下文绑定到回调函数：

setInterval(this.goRight.bind(this), 3000);

这样，一旦调用回调，this将正确引用您的类的实例。

干杯。

带有setInterval的轮播

1 个答案: