Удалить прослушиватель, когда прикрепленная функция имеет привязку - PullRequest
Новая
       29

Удалить прослушиватель, когда прикрепленная функция имеет привязку

1 голос
/ 03 июня 2019

Рассмотрим следующий код: 

class Test {

    constructor() {
        this.breakpoints = {};
    }

    add(options) {

        // Register the media query
        this.breakpoints[options.breakpoint] = window.matchMedia(options.breakpoint);

        // Register the listener
        this.breakpoints[options.breakpoint].addListener(this.breakpoint.bind(this));

    }

    remove(options) {
        this.breakpoints[options.breakpoint].removeListener(this.breakpoint.bind(this));
    }

    breakpoint() {
        // Do something...
    }
}

В приведенном выше коде вы заметите, что я присоединяю прослушиватель событий в методе add и пытаюсь удалить его в методе remove. Из-за кода в методе breakpoint, часть bind(this) абсолютно необходима.

В результате bind(this) (я полагаю), removeListener не удаляет прослушиватель медиазапроса. Есть ли способ решить эту проблему?

Я также пробовал это (без bind при удалении): 

remove(options) {
    this.breakpoints[options.breakpoint].removeListener(this.breakpoint);
}

1 Ответ

1 голос
/ 03 июня 2019

Один из вариантов - привязать метод breakpoint к контексту текущего экземпляра в конструкторе, чтобы ссылка this.breakpoint всегда ссылалась на связанный метод позже: 

class Test {
    constructor() {
        this.breakpoint = this.breakpoint.bind(this);
        this.breakpoints = {};
    }

    add(options) {
        // Register the media query
        this.breakpoints[options.breakpoint] = window.matchMedia(options.breakpoint);

        // Register the listener
        this.breakpoints[options.breakpoint].addListener(this.breakpoint);
    }

    remove(options) {
        this.breakpoints[options.breakpoint].removeListener(this.breakpoint);
    }

    breakpoint() {
        // Do something...
    }
}
...