一个可以立即执行的 setInterval

项目需求

电视大屏每过五秒定时请求数据,更新界面

案发现场

天才前端少年 红盾在项目即将上线的时候 又遇到了一个大坑

没错 同样是那个出过事故的 电视大屏

敏锐的产品经理 丁丁 发现了一个 bug

在刚进入界面的时候,界面数据并没有被更新,等过了五秒之后数据才被定时加载

检查代码

少年 红盾 打开 vscode 看了下大致代码

function render(){} // 更新函数
setInterval(()=>{
    render()
},5000)

随着一声 卧槽 代码变成了如下样子

function render(){} // 更新函数
render()
setInterval(()=>{
    render()
},50)

bug 成功被解决,自信上线. 获得了 产品经理 丁丁 的 🌈p 奖励

代码优化和封装

此时后端的 老黄 再次登场,有着代码洁癖的他对 少年 的代码进行了一顿改造

   const immediateSetInterval = (fn,duration=2000)=>setInterval((()=>(fn(),fn))(),duration)
   immediateSetInterval(render,2000) //一行代码 成功解决

不要急,我们一步步来拆分看下 老黄 的骚操作

我们看到 immediateSetInterval 接受两个参数 fn 和 duration

函数主体中的setInterval 也接受了两个参数,我们主要来解释下第一个参数

(()=>(fn(),fn))() 我们解构成三部分来看

• 主体是一个自执行函数
• 在函数体内部 巧妙的执行了一次 fn()
• 返回值为 fn 本身,用于当做源生 setInterval的第一个参数

后端为什么这么懂 js,就离谱~

完整代码

   const immediateSetInterval = (fn,duration=2000)=>setInterval((()=>(fn(),fn))(),duration)

小彩蛋🌈

下班的时候少年坐上了老黄的卡罗拉,往大众浴室出发了(不知道是不是去找 js 了)....