Функция JavaScript получает многократно повторяющееся событие при прослушивании событий, хотя я ссылаюсь на функцию

Question

Я добавляю слушателя событий каждый раз, когда создаю угловой контроллер. Каждый раз, когда я покидаю эту страницу и возвращаюсь к ней, появляется новый прослушиватель событий, потому что конструктор снова вызывается.

Когда это событие срабатывает, одно и то же событие вызывается дважды, и если я уйду и вернусь, он будет вызван 3 раза ... и т. Д. Я хочу, чтобы он всегда вызывался один раз.

Вот код для добавления слушателя событий, а функция Слушатель он называет: (FYI Я использую машинопись)

В конструкторе:

this.$window.addEventListener("message", this.processApi, false); 

Function Вызывается:

processApi = (e) => { 
    this.processApiMessage(e.data); 
}; 

Я прочитал, что я должен называть ссылку на функцию вместо того, чтобы вводить сама функцию, поэтому оба ссылаются на один и тот же экземпляр функции, но один и тот же прослушиватель событий вызывается несколько раз.

Когда я делаю инструменты разработчика в хроме и перехожу к EventListners и перехожу в раздел сообщений, каждый раз, когда я нажимаю на конструктор, я вижу новый элемент Window. Я могу удалить каждый из EventListers с помощью инструментов разработчика, но не могу заставить его работать через код, когда я делаю:

this.$window.removeEventListener("message", this.processApi, false); 

Я обнаружил, что если я обновить страницу, все слушатели событий ясно и мой в конструкторе создан так, что он отлично работает.

Я использую угловую систему и использовал службу определения местоположения $, чтобы перейти к URL-адресу, который попал в мой контроллер, поэтому быстрым решением было заменить $ location.url ("url") на window.location.href ("url")

Это похоже на работу, потому что страница обновляется, когда я перехожу к ней. Я предпочел бы сохранить $ location для маршрутизации, и только один раз прослушиватель событий попадает один раз, хотя угловой конструктор попадает несколько раз.

Answer 1

Вам необходимо удалить прослушиватель событий, когда область составляет $destroyed. Итак, в конструкторе контроллера вам необходимо ввести объект $scope. И в конструкторе сделайте что-нибудь вроде этого:

$scope.$on('$destroy',() => 
    $window.removeEventListener("message", this.processApi)); 

Конечно, существует несколько способов создания контроллера. Наиболее распространенным (особенно если вы используете TypeScript) является создание класса для контроллера.

Я бы также подумал о том, чтобы добавить слушателя к корневому объекту вместо окна $, что является более угловым способом делать вещи. Сложив все это, это будет выглядеть так:

class MyController { 
    constructor($rootScope, $scope) { 
    'ngInject'; 

    let unsubscriber = $rootScope.$on('message', this.processApi, false);  
    $scope.$on('$destroy',() => unsubscriber()); 
    } 
    ... 
}