如何实现精准的setTimeout

hykeda2年前JS1781

setTimeout 是不准的。因为 setTimeout 是一个宏任务,它的指定时间指的是:进入主线程的时间。

setTimeout(callback, 进入主线程的时间)

所以什么时候可以执行 callback,需要看 主线程前面还有多少任务待执行

function timer(speed) { 
   counter = 1,  
   start = new Date().getTime();  
   window.setTimeout(function() { instance(speed,counter,start); },speed); 
} 

function instance (speed,counter,start) { 
    //其他自己的逻辑 自己写上去
    

    var real = (counter * speed), //真实执行时间
    ideal = (new Date().getTime() - start); //系统执行时间
    var diff = (ideal - real);//真实执行时间差距
    counter++; //执行次数
    window.setTimeout(function() { instance(speed,counter,start); },(speed - diff)); // 通过系统时间进行修复 ,第二次执行时间变成了执行时间减去误差时间,等于执行时间间隔缩短了。修正了之前的误差
 
}; 

timer(1000);


标签: setTimeout

相关文章

前端截取视频指定帧为封面的两种方法

前端截取视频指定帧为封面的两种方法

一、使用本地canvas截取我们在网页上传视频后,如果能给视频设置一个封面图,用户体验会比较好,但是如果使用video标签的默认实现,部分浏览器会显示视频的第一帧,有些浏览器则怎么都不会展示;通过创建...

生成随机图片

function getMockImagesURL() { let arr = [200, 250, 300, 350, 400, 450]; const width = arr[...

天地图用服务端去调用接口提示403错误,解决办法

天地图用服务端去调用接口提示403错误,这里很有可能就是跨域问题。可以使用天地图官方的处理跨域的地址去处理:https://api.tianditu.gov.cn/apiserver/ajaxprox...

介绍几款有用的图表插件

大家在开发一些系统的时候会用到很多统计的图表,我在做统计报表的时候用过挺多图表插件的,现在推荐大家几款优秀、稳定、可靠、大公司开发的图表体统。 1、Highcharts Highchart...

WebAPP开发——H5标签audio(属性和API事件)

WebAPP开发——H5标签audio(属性和API事件)

audio支持的格式audio 定义音频 格式:mp3 wav oggmp3所有浏览器兼容ogg safari不支持wav 都支持js 能帮助生成audio对象 new Audio(); 等同于HTM...

前端Js自定义相机取景框

https://www.cnblogs.com/sanhuamao/p/14853990.html...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。