JS中构造函数触发无限循环问题求助

让我来拆解下你的代码问题根源：

先看你的构造函数和触发按钮：

function thing(){ 
  this.start=function (){console.log(this.msg)}; 
  this.msg="Starting..."; 
  setInterval(() => {this.start()},1000) 
}

<button onclick="new thing()">Create a new thing!</button>

核心原因 #

每次点击按钮执行new thing()时，都会发生这些事：

1. 创建一个全新的thing实例
2. 给这个实例绑定start方法和msg属性
3. 生成一个独立的setInterval定时器——这个定时器会每隔1秒调用一次当前实例的start方法，而且不会自动停止

问题就出在这里：

• 多次点击会创建多个独立运行的定时器，每个都在后台持续输出Starting...，视觉上就像“无限循环”
• 更严重的是，每个定时器都会持有对应thing实例的引用，导致这些实例无法被垃圾回收，会造成内存泄漏

补充一句：你在setInterval里用箭头函数是正确的，它保证了this指向当前的thing实例，所以this.start()能正确调用实例方法，这部分没有问题。

解决方案 #

根据你的需求，有两种常见处理方式：

1. 同一时间只保留一个运行的定时器

如果每次点击都要替换掉之前的实例和定时器，可以用全局变量保存定时器ID，创建新实例前先清除旧定时器：

let activeTimer = null;

function thing(){ 
  // 清除之前的定时器（如果存在）
  if(activeTimer) clearInterval(activeTimer);
  
  this.start = () => console.log(this.msg);
  this.msg = "Starting...";
  // 保存新的定时器ID
  activeTimer = setInterval(() => this.start(), 1000);
  
  // 可选：添加手动停止方法
  this.stop = () => {
    clearInterval(activeTimer);
    activeTimer = null;
  }
}

2. 让每个实例自主控制自身的定时器

如果需要同时存在多个实例，每个实例有独立的定时器，可以把定时器ID存在实例内部，方便后续清除：

function thing(){ 
  this.start = () => console.log(this.msg);
  this.msg = "Starting...";
  // 把定时器ID绑定到实例上
  this.timerId = setInterval(() => this.start(), 1000);
  
  // 添加停止方法
  this.stop = () => {
    clearInterval(this.timerId);
    this.timerId = null;
  }
}

使用时可以保存实例引用，随时停止：

<button onclick="const myThing = new thing()">Create a new thing!</button>
<button onclick="myThing?.stop()">Stop this thing!</button>

内容的提问来源于stack exchange，提问作者D. Pardal