Как переписать эту функцию, чтобы избежать многократного запуска addeventlistener

Question

Мне нужна помощь в переписывании этой функции. У меня больше нет идей.

Функция запускается при нажатии кнопки.

Что я делаю не так? Должен ли я прикрепить класс, чтобы знать, когда кнопка была нажата в первый раз?

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

Спасибо за вашу помощь.

function activareEvent(cauta){
  if(flag==1)
  {
    rezultat = rezultat1;
  }
  cautare = document.getElementById("cautare"+cauta);
  innermenu = document.getElementById("innermenu"+cauta);
  myDropdown=document.getElementById("myDropdown"+cauta);
  categoriego=document.getElementById("categoriego"+cauta);
  hiddencat=document.getElementById("hiddencat"+cauta);
  countscroll=0;
  counter=0;
  var mouseovr = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    for (i = 0; i < rezultat.length; i++) {
      document.getElementById(i).style.background = "";
    }
    countscroll=e.target.id;
    document.getElementById(countscroll).style.background = "#ddd";
  }
  innermenu.addEventListener('mouseover', mouseovr, false);
  var clickasc = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    categoriego.innerHTML=rezultat[countscroll][2];

    eacha=[];
    rezultata=[];
    counter=0;
    for (i = 0; i < rezultat.length; i++) {
      if (rezultat[i][0]==(rezultat[countscroll][1]))
      {
    eacha[i] = "<a id="+counter+">"+rezultat[i][2]+"("+rezultat[i][1]+")"+"</a>";
    rezultata.push([rezultat[i][0],rezultat[i][1], rezultat[i][2]]);
    counter++;
      }


    }
    if(rezultata.length>0){
      innermenu.innerHTML =eacha.join("");
      rezultat=rezultata;
    }
    else{
      hiddencat.value=rezultat[countscroll][1];
      innermenu.innerHTML = "";
      myDropdown.classList.toggle("show");
      document.getElementById(0).style.background = "#ddd";
      rezultat=[];
      countscroll=0;
      counter=0;
      innermenu.removeEventListener('keydown', mouseovr);
      innermenu.removeEventListener('keydown', clickasc);
      cautare.removeEventListener('keydown', cautaresc);
    }
  }
  innermenu.addEventListener('click', clickasc, false);
  var cautaresc = function(e){
    if(flag==1)
    {
      rezultat = rezultat1;
    }
    document.getElementById(countscroll).style.background = "";
    if(e.which == 38){
      countscroll--;
      if(countscroll<0)
      {
    countscroll=0;
      }
    }
    if(e.which == 40){
      countscroll++;
      if(countscroll==rezultat.length)
      {
    countscroll=rezultat.length-1;
      }
    }
    document.getElementById(countscroll).style.background = "#ddd";
    if(e.which == 13){
      categoriego.innerHTML=rezultat[countscroll][2];
      eacha=[];
      rezultata=[];
      counter=0;
      for (i = 0; i < rezultat.length; i++) {
    if (rezultat[i][0]==(rezultat[countscroll][1]))
    {
      eacha[i] = "<a id="+counter+">"+rezultat[i][2]+"("+rezultat[i][1]+")"+"</a>";
      rezultata.push([rezultat[i][0],rezultat[i][1], rezultat[i][2]]);
      counter++;
    }
      }
      if(rezultata.length>0){
    innermenu.innerHTML =eacha.join("");
    document.getElementById(0).style.background = "#ddd";
    rezultat=rezultata;
    console.log(counter);
      }
      else{
    hiddencat.value=rezultat[countscroll][1];
    innermenu.innerHTML = "";
    myDropdown.classList.toggle("show");
    rezultat=[];
    countscroll=0;
    counter=0;
    innermenu.removeEventListener('keydown', mouseovr);
    innermenu.removeEventListener('keydown', clickasc);
    cautare.removeEventListener('keydown', cautaresc);
      }
    }
  }
  cautare.addEventListener('keydown', cautaresc, false);
}

Answer 1

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

присоединить слушателей событий к пользовательскому классу со свойством flag, а затем проверить свойство в функции

определение класса

export class foo {
  constructor(HTMLElemenet){
    this.HTMLElement = HTMLElement
  }
  flag = true
  attachEventListener(){
    if(this.flag){
      //just an example, you can add any event listener here
      this.HTMLElement.addEventListener('click',()=>{})
      this.flag = false
    }
}

код

var baz = new foo
baz.attachEventListener(docuement.getElementById('bar'))