Angular 7中for循环内setInterval运行异常 如何实现动态短轮询？

你这段代码出现间隔不符合预期的核心原因有3个：

• setInterval回调函数的this指向错误，默认指向全局window对象而非Angular组件实例，逻辑执行出现异常偏差
• 未存储定时器实例，组件销毁时无法清理定时器，多次进入组件会重复生成定时器叠加触发，导致间隔错乱
• 使用var声明循环变量+IIFE的写法虽然解决了闭包变量共享问题，但写法冗余易出错，在ES6+环境下推荐用let块级作用域替代

// 组件内声明定时器存储数组
private timerIds: number[] = [];

ngOnInit() {
    this.liveFunction();
}

// 组件销毁钩子必须加，清理所有定时器避免内存泄漏和重复触发
ngOnDestroy() {
    this.timerIds.forEach(id => clearInterval(id));
}

liveFunction() {
    const list = [
        {
            "id": 1,
            "timer": 10000,
            "url": "https://www.sampleurl.com/1"
        },
        {
            "id": 2,
            "timer": 20000,
            "url": "https://www.sampleurl.com/users/1"
        }
    ];

    // 用let声明循环变量天然具备块级作用域，不需要额外IIFE包裹
    for (let i = 0, len = list.length; i < len; i++) {
        // 箭头函数自动继承外层this指向，不需要额外绑定
        const timerId = window.setInterval(() => {
            this.invokeAPI(list[i].url);
        }, list[i].timer);
        this.timerIds.push(timerId);
    }
}

invokeAPI(url: string) {
    // 你的业务逻辑
}

如果需要页面加载后立即触发第一次API调用，再按间隔轮询，在循环内新增一行立即调用逻辑即可：

for (let i = 0, len = list.length; i < len; i++) {
    // 新增：首次立即调用
    this.invokeAPI(list[i].url);
    const timerId = window.setInterval(() => {
        this.invokeAPI(list[i].url);
    }, list[i].timer);
    this.timerIds.push(timerId);
}

如果你需要支持每次请求后调整下一次的轮询间隔，同时避免API请求耗时超过间隔导致的请求堆叠问题，推荐用setTimeout递归实现：

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

// 存储轮询配置，方便动态修改间隔和清理定时器
private pollList = [
    {
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1",
        "timerId": null as number
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1",
        "timerId": null as number
    }
];

ngOnInit() {
    this.liveFunction();
}

ngOnDestroy() {
    this.pollList.forEach(item => clearTimeout(item.timerId));
}

liveFunction() {
    this.pollList.forEach(item => {
        // 递归轮询逻辑
        const poll = () => {
            this.invokeAPI(item.url).subscribe({
                next: () => {
                    // 此处可根据业务需求动态修改item.timer的值，下一轮就会使用新间隔
                    item.timerId = window.setTimeout(poll, item.timer);
                },
                error: (err) => {
                    console.error('请求失败', err);
                    // 错误时也继续轮询，避免中断
                    item.timerId = window.setTimeout(poll, item.timer);
                }
            })
        }
        // 首次触发
        poll();
    })
}

// 此处invokeAPI返回http请求的Observable
invokeAPI(url: string): Observable<any> {
    return this.http.get(url).pipe(
        catchError(err => {
            console.error(err);
            return of(null);
        })
    );
}

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