用setTimeout延时器代替setInterval定时器

今天有个需求，要求前端有个心跳机制，每十秒访问一个指定接口，想到权威指南里一直有提过setTimeout好于setInterval，就磨刀霍霍向代码了。

第一版 为了测试,时间改为1秒了
t_:number;
const that = this;
setTimeout(function test(){
          
   
         that.http.query(/api/heart_beat, {
          
   }).subscribe(res => {
          
   
                if(res){
          
   
                //  书上写的arguments.callee,后来查了一下说现在已经不用了
                // 就给内部函数命名一下就可以了，这里就是test
                    that.t_ = setTimeout(test, 1000);
                    console.log(that.t_);
                }
            });
 },1000) 

// 组件销毁的时候就取消了定时器 
ngOnDestroy(){
          
   
        console.log(this.t_);
        clearTimeout(this.t_);
    }

后来经过前辈提醒，如果多次刷新页面就设置了多个，处理方式就是把延时器存session里，判断是否创建了，这样就可以避免这个问题了，且有多个地方调用了退出，所以应该还有个公共方法来清空延时器。

目前版

最主要改动的地方

// 设置心跳
        if(!sessionStorage.getItem(heart)){
          
   
            const that = this;
            setTimeout(function test(){
          
   
                that.http.query(/api/heart_beat, {
          
   }).subscribe(res => {
          
   
                    if(res){
          
   
                        that.t_ = setTimeout(test, 1000);
                        sessionStorage.setItem(heart,that.t_.toString(10));
                    }
                });
            },1000); 
        }

书上说setInterval的问题有这两点 可能会被跳过，因为它是过了定时的时间才把任务放入队列，如果有其他任务在执行，就会导致任务延后。 目前这么写，万能的网友会有更好的方法。

工作上的总结，希望能帮助到大家。