“星期天早起是真的难”
写在前面:在前端开发过程中,我们会经常用到一个方法:setInterval,也就是定时器,但是在一些大公司或者一些Niu人的项目中,却很少有用到的,不是说不用定时器,而是不用setInterval,你知道为什么吗?
今日内容:使用setTimeout封装setInterval。
在我们进行封装之前,我们要搞清楚,为什么要使用setTimeout封装setInterval?
这个问题很好回答,那当然是setInterval不好,但它不好到哪里呢?我这里简单的来说一说:
1. setInterval无视代码错误
在使用setInterval进行定时执行时,它不会管你的代码是否报错,继续一次又一次的执行你的错误代码;
2. setInterval无视网络延迟
假设你每隔一段时间就通过Ajax轮询一次服务器,看看有没有新数据而由于某些原因(服务器过载、临时断网、流量剧增、用户带宽受限,等等),你的请求要花的时间远比你想象的要长。但setInterval不在乎。它仍然会按定时持续不断地触发请求,最终你的客户端网络队列会塞满Ajax调用
3.setInterval不保证执行
与setTimeout不同,你并不能保证到了时间间隔,代码就准能执行。如果你调用的函数需要花很长时间才能完成,那某些调用会被直接忽略。
翻译自zetafleet.com
接下来就是撸代码的时候了
$setInterval=(fn,time)=>{
fn();
setTimeout(fns,time);
};
fns();
};
我们在$setInterval内部定义一个方法fns(),在fns中执行传入的方法fn(),然后等传入时间到了之后再次执行fns()方法,这样就做到了定时器setInterval的功能。
还没完还没完!
如果必须保证间隔相等怎么办?
如果确实要保证事件“匀速”被触发,那可以用希望的延迟减去上次调用所花时间,然后将得到的差值作为延迟动态指定给setTimeout。 不过,要注意的是JavaScript的计时器并不是非常精确。因此你不可能得到绝对“平均”的延迟,即使使用setInterval也不行,原因很多( 比如垃圾回收、JavaScript是单线程的,等等 )。此外,当前浏览器也会将最小的超时时间固定在4ms到15ms之间。因此不要指望一点误差也没有。
今天的内容就到这儿了,关于setInterval的问题,可以自己去查一查,它并没有你想象中的那么简单!
明天讲什么东西呢?
Time is Expensive !
领取专属 10元无门槛券
私享最新 技术干货