Блог

Главная - Вопросы по программированию - Устранение проблем со слушателями / областью действия

Устранение проблем со слушателями / областью действия

#javascript #listener #addeventlistener #removeeventlistener

Вопрос:

В проекте с плавным переходом на страницу мне трудно убить всех лишних слушателей. На странице-изменение вызывается функция removeEventListeners. Однако я не могу удалить слушателей в окне.

Я знаю, что область видимости переменной в первом примере кода неверна. И я пытался исправить это во втором примере. Безуспешно. Есть какие-нибудь идеи?

 export default class Slider extends Core {
    init() {
        const swiper = new Swiper('.mySlider', {
            slidesOffsetBefore: this.sliderOffset(),
        });

        window.addEventListener('resize', () => {
            swiper.params.slidesOffsetBefore = this.sliderOffset();
            swiper.update();
        });
    }
    removeEventListeners() {
       // this doesn't work since there is no function reference
       window.removeEventListener('resize');
    }

    sliderOffset() {
       // does stuff and...
       return value
    }
}

Похоже, это тоже не работает…

 export default class Slider extends Core {
    init() {
        this.swiper = new Swiper('.mySlider', {
            slidesOffsetBefore: this.sliderOffset(),
        });

        window.addEventListener('resize', this.updateSwiper);
    }

    updateSwiper() {
        this.swiper.params.slidesOffsetBefore = this.sliderOffset();
        this.swiper.update();
    }
    
    removeEventListeners() {
       window.removeEventListener('resize', this.updateSwiper);
    }

    sliderOffset() {
       // does stuff and...
       return value
    }
}

Комментарии:

1. Вы можете использовать свой второй пример, но над вашим addEventListener вы можете использовать this.updateSwiper = this.updateSwiper.bind(this) , чтобы установить updateSwriper для связанной версии вашей функции updateSwiper

2. Примечание: Я обнаружил, что RxJS может создавать наблюдаемое из события с fromEvent(window, "resize") помощью , а затем вы подписываетесь на него: fromEvent(...).subscribe(callback) . Когда вам это больше не нужно, все, что вам нужно сделать, это .unsubscribe() . С тех пор я addEventListener вообще перестал им пользоваться.

Метки: