如何重写此函数以避免 addeventlistener 多次触发

Question

我需要一些帮助来重写这个函数。我已经没有想法了。

该功能从 onclick 按钮开始。

我做错了什么？我应该附上一个班级以了解第一次单击按钮的时间吗？

我已经尝试了任何我能想到的方法，创建全局变量以查看之前是否访问过 main 函数，如果是，它将删除事件侦听器。我在第一次访问该功能时附加了一个类。我的想法用完了。

感谢您的帮助。

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 语句使您的代码难以扩展，您可能会考虑将该逻辑写入类而不是函数实现。我不太清楚你在这里需要什么，但无论如何我都会试一试：

将事件侦听器附加到具有标志属性的自定义类，然后检查函数中的属性

类定义

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'))