0

Всем привет. Делаю поиск пользователей Github с помощью github API на нативном js. Подскажите, пожалуйста, как удалить обработчик из памяти, то есть, те элементы, которые в интерфейсе появляются и удаляются/исчезают Знаю, что надо использовать removeEventListener, но где именно его прописывать и надо ли создавать метод под него? Если метод, то какие параметры должен принимать и где его вызывать?

class Search {
  constructor(view) {
    this.app = document.querySelector(".search__input");
    this.app.addEventListener(
      "keyup",
      debounce(() => this.createAutofill(this.app.value), 250)
    );
    this.view = view;
  }

  async getRepos(value) {
    return await fetch(
      `https://api.github.com/search/repositories?q=${value}&per_page=5`
    ).then((response) => response.json());
  }

  async createAutofill(value) {
    if (document.querySelector(".search__list")) this.view.removeAutofillList();
    if (value.trim().length !== 0) {
      await this.getRepos(value)
        .then((repos) => this.view.createAutofillList(repos))
        .catch((err) => console.log(err));
    }
  }

  inputCleaner() {
    this.app.value = "";
  }
}

class View {
  constructor() {
    this.container = this.createNewElement("div", "lists");
    document.querySelector(".search").append(this.container);
    this.pinList = this.createNewElement("ul", "search__pin-list");
  }

  createAutofillList(data) {
    const list = this.createNewElement("ul", "search__list");
    data.items.forEach((item) => {
      list.append(this.createNewElement("li", "search__list-item", item.name));
    });
    this.container.prepend(list);
    this.elementsListener(list, data);
  }

  createNewElement(selector, className, text) {
    const element = document.createElement(selector);
    element.classList.add(className);
    if (text) element.innerText = text;
    return element;
  }

  removeAutofillList() {
    document.querySelector(".search__list").remove();
  }

  elementsListener(list, data) {
    const elements = list.querySelectorAll(".search__list-item");
    elements.forEach((element, index) => {
      element.addEventListener("click", () => {
        this.pinElement(data.items[index]);
        search.inputCleaner();
        this.removeAutofillList();
      });
    });
  }

  pinElement(data) {
    const text = `Name: ${data.name}\nOwner: ${data.owner.login}\nStars: ${data.stargazers_count}`;
    const element = this.createNewElement("li", "search__pin-item", text);
    element.append(this.createNewElement("button", "search__pin-button"));
    this.pinList.append(element);
    this.container.append(this.pinList);
    this.pinElementListener();
  }

  pinElementListener() {
    const elements = this.pinList.querySelectorAll(".search__pin-item");
    elements.forEach((element) => {
      const buttonClose = element.querySelector(".search__pin-button");
      buttonClose.addEventListener("click", () => {
        element.remove();
      });
    });
  }
}

const debounce = (fn, debounceTime) => {
  let timeout;

  return function () {
    const fnCall = () => fn.apply(this, arguments);
    clearTimeout(timeout);
    timeout = setTimeout(fnCall, debounceTime);
  };
};

const search = new Search(new View());

2
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. Commented 23 апр. 2022 в 12:03
  • нельзя отписать анонимного слушателя Commented 23 апр. 2022 в 14:33

1 ответ 1

0

Для того, чтобы удалить обработчик нужно использовать метод removeEventListener(). Однако учтите, что удалить анонимного слушателя невозможно.
То есть код будет примерно такой:

// Функция-обработчик
function foo(e) {...}
// Добавление слушателя
EventTarget.addEventListener('event', foo)
// Удаление слушателя
EventTarget.removeEventListener('event', foo)

Вам необходимо вынести анонимную функцию из обработчика в именную.

func() {
  this.pinElement(data.items[index]);
  search.inputCleaner();
  this.removeAutofillList();
}

elementsListener(list, data) {
  const elements = list.querySelectorAll(".search__list-item");
  elements.forEach((element, index) => {
    element.addEventListener("click", func);
  });
}

deleteListener() {
  const elements = list.querySelectorAll(".search__list-item");
  elements.forEach((element, index) => {
    element.removeEventListener("click", func);
  });
}
5
  • У меня почему не получается ваш вариант. Возможно я что-то не понимаю. Напишите, пожалуйста, полностью на моем примере как это должно выглядеть
    – Mikrochek
    Commented 23 апр. 2022 в 15:17
  • @Mikrochek Ваш пример - достаточно большой код. Если у вас что-то не получается, напишите что конкретно.
    – T0xee.n17
    Commented 28 апр. 2022 в 19:07
  • В методе elementsListener() не пойму как реализовать removeEventListener
    – Mikrochek
    Commented 30 апр. 2022 в 12:19
  • @Mikrochek Обновил ответ
    – T0xee.n17
    Commented 1 мая 2022 в 9:44
  • Благодарю, теперь все работает как надо
    – Mikrochek
    Commented 2 мая 2022 в 15:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.