javascript - 调用 self 时代码运行多次

Question

我在一个更大的项目上使用此登录，但我可以用这段代码模拟问题。通过这个类，我想更新计数器，以便使用事件监听器从另一个方法访问更新的计数器，出于本示例的目的，我将打印计数器以查看行为。

class Test {

  private counter: nubmer = 0;
  private add: Element;
  private remove: Element;

  constructor(){
    this.add = document.getElementById('btn');
    this.remove = document.getElementById('btn2');
    this.start();
  }

  public print(): void {
    console.log(this.counter);
  }

  public start(): void {

    this.add.addEventListener('click', () => {
      this.counter += 1;
      this.start();
    });

    this.remove.addEventListener('click', () => {
      this.counter -= 1;
      this.start();
    });

    this.print();

  }
}

带有两个按钮的 HTML 页面

<button id="btn">Add</button>
<button id="btn2">Remove</button>

此实现的问题是，每次我单击添加或删除按钮时，代码都会首先运行一次，第二次单击时运行两次，第三次单击时运行四次，等等。

Answer 1

每次点击时您都会添加额外的事件监听器...

this.add.addEventListener('click', () => {
  this.counter += 1;
  this.start(); // <-- this is the problem
});

解决方案 - 我认为您想调用 print，而不是 start:

class Test {

  private counter: nubmer = 0;
  private add: Element;
  private remove: Element;

  constructor(){
    this.add = document.getElementById('btn');
    this.remove = document.getElementById('btn2');
    this.start();
  }

  public print(): void {
    console.log(this.counter);
  }

  public start(): void {

    this.add.addEventListener('click', () => {
      this.counter += 1;
      this.print();
    });

    this.remove.addEventListener('click', () => {
      this.counter -= 1;
      this.print();
    });

    this.print();

  }
}