别再用 setInterval 轮询接口了:用 requestAnimationFrame + Fetch 实现更优雅的定时刷新
有个后台监控页面,需要每隔几秒刷新一次数据,展示最新的在线用户数和请求量。很多同学第一反应是 setInterval,写起来确实简单:setInterval(fetchData, 3000)。但上线之后问题慢慢就来了。页面切到后台标签页时,setInterval 仍然按照固定频率触发,不仅浪费带宽,还会在服务端产生大量无意义的请求。如果接口偶尔变慢,上一次请求还没返回,下一次请求又发出去了,请求顺序错乱、数据覆盖、甚至内存泄漏都可能出现。更麻烦的是,用户切换标签页回来,可能瞬间触发一堆积压的回调。这篇文章会从实际开发场景出发,分析 setInterval 做轮询的几个典型坑,然后给出一个基于 ...