Question

我在一个更大的项目上使用此登录但我可以用这段代码模拟问题。有了这个类，我想更新计数器，以便使用eventListener从另一个方法访问更新的计数器，为了这个例子的目的，我将打印计数器以查看行为。

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();

  }
}

Answer 2

简短回答：从您的事件监听器中删除this.start();。

问题是你在start

上重新绑定

public start(): void {

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

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

this.print();

 }

每次单击按钮时都会调用

this.start();。 start()包含this.add.addEventListener，其中添加另一个点击绑定。

调用self时代码运行多次

2 个答案: