如何实现可变间隔循环并正常访问构造函数内的变量

问题根因 #

setTimeout 执行回调时默认会将回调的上下文绑定到全局对象（浏览器环境为 window，Node.js 环境为 globalThis），导致你回调函数内的 this 不指向 example 类的实例，因此无法获取到挂载在实例上的 interval 属性，返回 undefined。

解决方案 #

方案1：箭头函数绑定上下文（最推荐） #

箭头函数的 this 会继承定义时外层作用域的 this，不会被 setTimeout 改变执行上下文，修改后代码如下：

function example(initialInterval = 1000) {
  // 构造函数初始化实例属性，支持外部直接修改
  this.interval = initialInterval
  // 可选：存储定时器ID，用于后续停止循环
  this.timerId = null
}

example.prototype.Start = async function() {
  this.timerId = setTimeout(() => this.loopTask(), this.interval)
}

// 注意：不要用内置关键字Function作为自定义方法名，避免命名冲突
example.prototype.loopTask = async function() {
  // 此处this已正确指向example实例，interval可正常读写
  this.interval++
  console.log('当前执行间隔：', this.interval)

  // 若存在异步逻辑，建议将下一次调度放在异步逻辑执行完成后，避免任务堆叠
  // await 你的异步业务逻辑()

  this.timerId = setTimeout(() => this.loopTask(), this.interval)
}

你可以在外部直接修改实例的 interval 属性，修改后下一次调度就会生效：

const taskInstance = new example(1000)
taskInstance.Start()
// 外部修改间隔，立即生效
taskInstance.interval = 3000

方案2：bind显式绑定上下文 #

如果你不想使用箭头函数，也可以通过 bind 方法将回调的 this 永久绑定到实例对象：

example.prototype.Start = async function() {
  this.timerId = setTimeout(this.loopTask.bind(this), this.interval)
}

example.prototype.loopTask = async function() {
  this.interval++
  this.timerId = setTimeout(this.loopTask.bind(this), this.interval)
}

额外优化建议 #

• 如果需要停止循环，可以调用 clearTimeout(taskInstance.timerId) 即可终止后续调度。
• 若异步业务逻辑的执行耗时可能超过当前设置的间隔，一定要将下一次定时器的创建放在异步逻辑执行完成之后，避免出现任务堆叠、执行顺序混乱的问题。

内容的提问来源于stack exchange，提问作者Bob Boby