如何用JavaScript持续检测变量，满足条件时自动执行函数显示入会按钮？

你可以通过Angular结合RxJS的定时能力实现该需求，无需用户手动刷新页面即可自动触发状态更新，具体实现步骤如下：

步骤1：预处理会议数据 #

拿到服务端返回的会议数组后，给每个会议对象新增一个状态标记位，控制入会按钮的显示隐藏：

import { interval } from 'rxjs';
import { startWith } from 'rxjs/operators';

// 定义会议数据结构
interface Meeting {
  id: number;
  startTime: Date;
  endTime: Date;
  // 其他业务字段
  showJoinBtn?: boolean;
}

meetings: Meeting[] = [];
// 假设getMeetingList是你请求服务端会议列表的方法
this.meetingApi.getMeetingList().subscribe(res => {
  // 初始化按钮状态为隐藏
  this.meetings = res.map(item => ({...item, showJoinBtn: false}));
  // 启动时间检查逻辑
  this.startTimeCheck();
})

步骤2：实现定时检查逻辑 #

用RxJS的interval创建全局轮询任务，推荐30秒/1分钟检查一次即可，不需要过高频率避免性能浪费：

private checkSub;
startTimeCheck() {
  // 每30秒执行一次检查，startWith保证组件初始化时立刻执行一次检查
  this.checkSub = interval(30 * 1000).pipe(startWith(0)).subscribe(() => {
    const now = new Date();
    this.meetings.forEach(meeting => {
      // 符合会议开始条件时自动显示按钮
      if (!meeting.showJoinBtn && now >= new Date(meeting.startTime) && now < new Date(meeting.endTime)) {
        meeting.showJoinBtn = true;
        // 其他需要触发的业务逻辑可以在这里补充
      }
      // 可选补充：会议结束后自动隐藏按钮
      if (meeting.showJoinBtn && now >= new Date(meeting.endTime)) {
        meeting.showJoinBtn = false;
      }
    })
  })
}

步骤3：组件销毁时清理资源 #

避免内存泄漏，组件销毁时需要取消轮询订阅：

ngOnDestroy() {
  if (this.checkSub) {
    this.checkSub.unsubscribe();
  }
}

步骤4：模板绑定显示逻辑 #

原有ngx-moment渲染剩余时间的逻辑不用改动，直接绑定状态位控制按钮显示即可：

<div *ngFor="let meeting of meetings">
  <p>会议开始剩余时间：{{meeting.startTime | amTimeAgo}}</p>
  <button *ngIf="meeting.showJoinBtn">进入会议</button>
</div>

优化建议 #

• 如果会议列表数据量很大（超过100条），可以在遍历时过滤掉已经过了开始/结束时间的会议，减少无效遍历的性能消耗
• 会议数量较少的场景下，也可以计算每个未开始会议距离开始的时间差，给每个会议单独设置一次性的setTimeout，到点直接触发状态更新，不用全局轮询，性能更高

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