JS定时器不准及解决方案

原因：.Eventloop 循环机制中，异步事件 setInterval 到时后会把回调函数放入消息队列中，主线程的任务执行完毕后依次执行消息队列的任务，由于消息队列中存在大量任务，其他任务执行时间就会造成定时器回调函数的延迟，如果不处理则会一直叠加延迟
示例：

var startTime = new Date().getTime();
var count = 0;
//耗时任务
setInterval(function(){var i = 0;while(i++ < 100000000);
}, 0);setInterval(function(){count++;console.log(count + ' --- ' + (new Date().getTime() - (startTime + count * 1000)));
}, 1000);

示例输出：

解决方案1： 动态计算时差
根据定时器最开始时间计算当前时间（回调函数执行时间）与开始时间的误差，用期望时差减误差作为下一次任务的时间间隔
注：时差过大（超过期望时差）时，由于无法时间回流。。。只能按没有间隔处理，减轻影响

var startTime = new Date().getTime();
var count = 0;
//耗时任务
setInterval(function(){var i = 0;while(i++ < 100000000);
}, 0);
function handle() {count++;var offset = new Date().getTime() - (startTime + count * 1000);var nextTime = 1000 - offset;if (nextTime < 0) nextTime = 0;setTimeout(handle, nextTime);console.log(count + ' --- ' + (new Date().getTime() - (startTime + count * 1000)));
}
setTimeout(handle, 1000);

输出结果：

解决方案2： 使用 web Worker
将定时函数作为独立线程执行

<script type="text/javascript">
var startTime = new Date().getTime();
var count = 0;
//耗时任务
setInterval(function(){var i = 0;while(i++ < 100000000);
}, 0);// worker 解决方案
let worker = new Worker('./worker定时器.js')
</script>

// worker定时器.js
var startTime = new Date().getTime();
var count = 0;
setInterval(function(){count++;console.log(count + ' --- ' + (new Date().getTime() - (startTime + count * 1000)));
}, 1000);

输出结果：

JS定时器不准及解决方案相关推荐

的setinterval函数_Vue定时器与JS 定时器 setInterval() 和 setTimeout()
H5前端开发社区专注更多编程教程和电子书天天在用钱在vue中,有两套定时器,一套是浏览器API,window对象上的:另一套就是vue/nodejs封装的,需要引入 import { setInter ...
Vue进阶（七十八）：Vue 定时器与 JS 定时器
文章目录一.Vue 定时器二.JS 定时器一.Vue 定时器在vue中,有两种定时器,一是浏览器API,window对象上的:另一种就是vue/nodejs封装的,需要引入. import { ...
【Three.js】关于Three.js的辅助库ststs.js报错的解决方案
[Three.js](一) 了解Three.js基本的代码样式与运行结果问题描述解决方案关于Three.js的问题,可以与作者共同讨论. 问题描述作者初学Three.js,需要用到ststs. ...
js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
Python 执行js的2种解决方案-乾颐堂
Python 执行js的2种解决方案-乾颐堂参考文章: (1)Python 执行js的2种解决方案-乾颐堂 (2)https://www.cnblogs.com/qytang/p/5580922.h ...
angularJS 路由加载js controller 未定义解决方案
2019独角兽企业重金招聘Python工程师标准>>> 说明本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义解决方案. ...
[转]基于 aspnet 的自动合并输出js和css的解决方案
这是一个基于 aspnet 的自动合并输出js和css的解决方案. 首先感谢 LoveCherry 的文章<httpmodule和httphandler配合的又一应用--合并脚本样式>(h ...
网页的js源文件被加密解决方案
网页的js源文件被加密解决方案 Firefox和Chrome都具有这个功能,而且位置几乎一致 posted on 2019-04-30 10:52 凉云阅读(...) 评论(...) 编辑收藏转 ...
js定时器和linux命令locate
js定时器如果带有参数,应该采用如下方式 setTimeout(function(){function(param)},1000); 匿名函数的方法. linux locate基于数据库的查找方法. ...

JS定时器不准及解决方案

JS定时器不准及解决方案相关推荐

最新文章

热门文章