javascript - 链接addEventListeners将导致一段时间后性能降低 | 链接addEventListeners将导致一段时间后性能降低

我最近创建了一个基于3个主要按钮之间的依赖关系的Web应用程序。
该应用程序是一个资本发现者项目。总结一下，在这个应用程序中，我有一组与区域选择有关的按钮。在用户选择了一个区域之后，他将不得不按下一个按钮，该按钮从所选区域中呈现一个随机的国家/地区，以及一组4个按钮，它们是主要的选择。用户将选择一个选项，他将收到一条反馈消息，并且按钮的颜色将相应更改。该应用程序在开始时运行平稳，但是在更改了某些区域后，它开始呈现数据非常缓慢且有很多延迟。

为了创建此按钮单击顺序以获得所需的结果，我添加了3个依赖于另一个的addEventListener函数。因此，如下面的示例所示，仅当已选择上一个值时，按钮才会记录所需的值。问题在于，如果多次选择按钮1和2，则第3个按钮将以某种方式将前几次的值相加。这就是使我的应用越来越慢且无法正常使用的原因。希望对此有解决方案。

复制步骤：
1.多次单击第一个按钮
2.多次单击第二个按钮
3.在第三个按钮上仅单击一次

const buton1 = document.querySelector('#btn1')

buton1.addEventListener('click', () => {
  console.log('Hello from button 1')

  const buton2 = document.querySelector('#btn2')
  buton2.addEventListener('click', () => {
    console.log('Hello from button 2')

    const buton3 = document.querySelector('#btn3')
    buton3.style.background = 'white'
    buton3.addEventListener('click', () => {
      console.log('Hello from button 3')
    })
  })
})

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <button id="btn1">1St Button</button>
  <button id="btn2">2nd Button</button>
  <button id="btn3">3rd</button>
</body>


</html>

最佳答案

动态分配侦听器并不是控制流的最佳方法，因为您已经发现它可能会引起一些膨胀。

这是上面的一个简单示例，其中包含单个事件侦听器和一个属性，您可以将其分配给元素以确定所需的点击顺序。

let clicked = [];
document.addEventListener('click', (e)=>{
    if(e.target.matches('.funButton')){
        let thisOrder = parseInt(e.target.getAttribute('data-clickOrder'));
        if(clicked.length === thisOrder){
            clicked.push(e.target.id);
            console.log('hello from ' + e.target.id);
        }
    }
});

<html>
<head>
<style>

</style>
</head>
<body>
<button id="b1" class="funButton" data-clickOrder="0">1St Button</button>
<button id="b2" class="funButton" data-clickOrder="1">2nd Button</button>
<button id="b3" class="funButton" data-clickOrder="2">3rd</button>
</body>
</html>

关于javascript - 链接addEventListeners将导致一段时间后性能降低，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57972297/