十几个不同频率的轮训接口如何优化整理？

Question

一个页面有十几个数据模块，每个数据模块都是不同的接口，也有不同的更新频率，比如有的是10秒，有的是30秒，最快的1秒，最慢的60秒。

现在是每个接口一个settimeout去做轮训。

现在的优化思路是维护一个心跳接口，一秒钟一次，然后维护一个数字，数字是15的倍数就掉一次15的接口，60的倍数就调一次60的接口，但是担心自己处理不好这些逻辑。想问下有没有成熟的库来
做这些逻辑？

Answer 1

看上去 CRON Schedule 完全可以满足你的需求。如果不了解什么是 CRON，可以自己搜索一下。

这个上 npm 上一搜一大把。要注意看下是否支持 Browser，有一些是只能用在 Node.js 后端上的。

随便找了几个：

• timexe
• cron-schedule
• cronosjs

Answer 2

大致是这么个逻辑

function loop:
    for tick in schedule 
         n.update(now()) 
end

class Tick:
   delay = 1000;
   lastTime = 0;
   update(time):
      if time - lastTime >= delay
         lastTime = time;
          execute();

Answer 3

我个人觉得这个逻辑里面最应该注意的是：项目并发请求的量会不会超过浏览器的限制

Answer 4

不要用人的思维去思考程序 也不要强行为了舒服去写程序
为什么所有的轮询都一定要按照同样的节奏去运行
这种东西实际运行起来的时候 由于一般还要有重连和确认等机制 导致他们就是不同步的 各自跑各自的是常态

Answer 5

因为组件化的关系导致页面上的这种定时任务变化很大，如果统一处理的话稍有不慎就会产生资源浪费（例如组件已经销毁了，但是统一调度中忘记释放），所以我的思路是不去刻意处理这个事情，任由组件按自己的模式工作就好了。
但是request接口是统一封装的，所以在这里做一个处理就好了。例如组件A和组件B同时请求地址C，那么request接口会将其合并，从而避免重复请求，如果需要甚至可以加上一个短时缓存来进一步优化。不进行缓存优化的例子如下：

const loadingMap: {[key: string]: Promise<any>} = {};
const HTTPRequest = (url, options): Promise<any> => {
    if (! options?.method || options.method.upperCase() === 'GET') {
        const key = JSON.stringify({ url, params: options?.params || {} });
        if (!loadingMap[key]) {
            loadingMap[key] = doRequest(url, options).then(resolve => {
                delete (requestingMap[key]);
                return Promise.resolve(resolve);
            }, reject => {
                delete (requestingMap[key]);
                return Promise.reject(reject);
            });
        }
        return requestingMap[key];
    }
    return doRequest(url, options);
}
const doRequest = ... // 实际进行请求处理