Angular6中setInterval()无法工作问题求助：需保留clearInterval避免无限执行

嘿，我一眼就看穿你代码里的问题了——你刚创建完定时器，紧接着就立刻把它清除了！

看你这段代码的最后两行：

console.log('interval test2'); 
if (this.interval) { 
  clearInterval(this.interval); 
}

setInterval 是异步任务，创建后不会立刻执行回调，JavaScript会先跑完后面的同步代码。所以你刚给 this.interval 赋值，下一行就调用 clearInterval 把它干掉了，定时器根本没机会触发第一次执行！这就是为什么你去掉这段代码后，定时器能正常工作的原因。

修正后的代码（匹配你的原有逻辑） #

如果你想保留“每隔2秒检查输入框焦点，聚焦时发送停止输入信号，失焦时发送信号并停止定时器”的逻辑，只需要把那个多余的clearInterval移到创建定时器之前（避免重复创建定时器），然后调整回调里的逻辑：

// 先清除已有定时器，防止重复创建
if (this.interval) {
  clearInterval(this.interval);
}

// 创建新的定时器
this.interval = setInterval(() => { 
  console.log('stoptyping'); 
  const stdata = { chatId: this.chatId, userId: this.common.getUserId() }; 
  this.chatService.iamStopTyping(stdata);

  // 如果输入框失去焦点，清除定时器
  if (!msg_area.onfocus) { 
    console.log('interval test1'); 
    clearInterval(this.interval); 
    this.interval = null; // 置空避免后续判断出错
  } 
}, 2000); 
console.log('interval test2');

更符合聊天场景的优化方案 #

不过看你的逻辑，应该是想实现“用户停止输入一段时间后，发送‘停止输入’的信号”——这是聊天应用里很常见的需求。这种场景用 setTimeout + 重置定时器的方式更合理，避免不必要的重复请求：

// 在组件类里定义定时器变量
private typingTimer: number | null = null;

// 输入框的input事件处理函数（用户输入时触发）
onInput() {
  // 清除之前的定时器，重置计时
  if (this.typingTimer) {
    clearTimeout(this.typingTimer);
  }

  // 2秒后发送停止输入信号
  this.typingTimer = setTimeout(() => {
    const stdata = { chatId: this.chatId, userId: this.common.getUserId() }; 
    this.chatService.iamStopTyping(stdata);
    this.typingTimer = null;
  }, 2000);
}

// 输入框失去焦点时，立即发送信号并清除定时器
onBlur() {
  if (this.typingTimer) {
    clearTimeout(this.typingTimer);
    this.typingTimer = null;
  }
  const stdata = { chatId: this.chatId, userId: this.common.getUserId() }; 
  this.chatService.iamStopTyping(stdata);
}

关键提醒：组件销毁时清理定时器 #

在Angular里，一定要记得在组件销毁时清除定时器，避免内存泄漏：

ngOnDestroy() {
  // 清理setInterval的定时器
  if (this.interval) {
    clearInterval(this.interval);
  }
  // 清理setTimeout的定时器（如果用了上面的优化方案）
  if (this.typingTimer) {
    clearTimeout(this.typingTimer);
  }
}

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