settimeout时间误差_采集终端和电能表日计时误差

settimeout时间误差_采集终端和电能表日计时误差setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每100ms执行一次,每次执行需要5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、背景

最近项目中加了一个计时器,我是用setInterval来实现计时的,用于显示订单剩余支付时间,但我发现,短时间还好,时间长了,计时器的误差会很大。

二、问题

我现在来模拟一下这个问题

1.用setInterval实现计时

来看段代码

var start = new Date().getTime(), count = 0;
var interval = setInterval(function () {
    count++
    console.log(new Date().getTime() - (start + count * 1000) + 'ms')
    if(count == 10){
    clearInterval(interval);
    }
}, 1000)

在这里插入图片描述

可以看到,我打印的new Date().getTime() – (start + count * 1000) ,
也就是每次计时的误差,理想情况下,应该是0。

2.用setTimeout实现计时

var start = new Date().getTime(), count = 0,interval = 1000;
var timer = setTimeout(doFunc,interval);
function doFunc(){
    count++
    console.log(new Date().getTime() - (start + count * 1000) + 'ms');
  if(count < 10){
	    timer = setTimeout(doFunc,interval);
    }
}

在这里插入图片描述
也是一样的会出现误差

三、分析

1.出现误差的原因

setInterval、setTimeout实现都会出现误差,这源于js的单线程。
他们的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行。
setInterval、setTimeout都属于宏任务。
有关事件循环机制的内容,可参考文章
JavaScript中的Event Loop(事件循环)机制(含图解)

2.setInterval、setTimeout误差的不同之处

setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每 100ms 执行一次,每次执行需要 5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。

为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。

四、模拟阻塞事件

现在来模拟一下,加一些阻塞线程的代码试试

1.setInterval

如:

//阻塞代码
setInterval(function () {
  var n = 0
  while (n++ < 1000000000);
}, 1000)

var start = new Date().getTime(), count = 0;
var interval = setInterval(function () {
    count++
    console.log(new Date().getTime() - (start + count * 1000) + 'ms')
    if(count == 10){
    clearInterval(interval);
    }
}, 1000)

在这里插入图片描述

2.setTimeout

//阻塞代码
setInterval(function () {
  var n = 0
  while (n++ < 1000000000);
}, 1000)

var start = new Date().getTime(), count = 0,interval = 1000;
var timer = setTimeout(doFunc,interval);
function doFunc(){
    count++
    console.log(new Date().getTime() - (start + count * 1000) + 'ms');
  if(count < 10){
	    timer = setTimeout(doFunc,interval);
    }
}

在这里插入图片描述

可以看到加了一些阻塞线程的代码后,误差越来越严重,
在实际项目中,执行计时器的同时,会有很多其他异步阻塞事件,会导致倒计时功能不精确。

四、解决方案

我们需要进行误差修正,也就是获取到误差的值,并且根据这个误差值来动态调整我们执行回调的间隔时间

  • 计算误差值
  • 动态调整执行setTimeout的间隔

加上动态误差修正

var start = new Date().getTime(), count = 0,interval = 1000;
var offset = 0;//误差时间
var nextTime = interval - offset;//原本间隔时间 - 误差时间
var timer = setTimeout(doFunc,nextTime);
function doFunc(){
    count++
    console.log(new Date().getTime() - (start + count * interval) + 'ms');
     offset = new Date().getTime() - (start + count * interval);
    nextTime = interval - offset;
    if (nextTime < 0) { nextTime = 0; }
  if(count < 10){
	    timer = setTimeout(doFunc,nextTime);
    }
}

试试效果:

在这里插入图片描述

我把每次的nextTime打印出来看看:
在这里插入图片描述

可以看到每次的nextTime都会根据上次的误差值来动态调整,以尽量减少整体的误差。

拓展

最近发现一个新的问题,
切换页面导致计时器停止,setInterval切换页面后不执行

原因
因为浏览器的优化原因,setTimeout()和setInterval(),在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。

解决方案
准备用 Web Workers 去做一个优化。

Web WorkersWeb Workers 是 HTML5
提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

参考
https://blog.csdn.net/lhz_333/article/details/105678627

本文链接https://blog.csdn.net/qq_39903567/article/details/115392972

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188868.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c语言编木马程序,肿么用C语言编写木马.病毒等程序

    c语言编木马程序,肿么用C语言编写木马.病毒等程序嘿嘿给你个类病毒C程序源码,看下方法吧#defineSVCHOST_NUM6#include#includechar*autorun={“[autorun]\nopen=SVCHOST.exe\n\nshell\\1=打开\nshell\\1\\Command=SVCHOST.exe\nshell\\2\\=Open\nshell\\2\\Command=SVCHOST.exe\nshel…

  • GlassFish 总结

    GlassFish 总结##Glassfish简介Glassfish是一款Web应用服务器,和Tomcat一样,也是一款优秀的Servlet容器。##domin概念1、domain是Glassfish中,拥有独立端口的

  • XSRF 的攻击与防范

    XSRF 的攻击与防范官方定义CSRF(Cross-siterequestforgery跨站请求伪造,也被称成为“oneclickattack”或者sessionriding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,并且攻击方式几乎相左。XSS利用站点内的信任用户,而XSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS

  • 《Java编程思想》总结

    《Java编程思想》总结语言实际上是帮助程序员更容易地操作计算机的工具,选择何种语言来编程,是Java还是C++,本质上相当于“选择腾讯视频还是优酷视频来观看电视节目(那么选择汇编语言就是选择了电视机)”。正如腾讯视频是腾讯公司的产品,Java是美国公司Sun的产品。希望读者能明白:语言只是工具。

  • es6数组方法find()、findIndex()与filter()的总结

    es6数组方法find()、findIndex()与filter()的总结find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素,找到后立即返回。返回的结果为查找到的元素:constmyArr=[1,2,3,4,5,6];varv=myArr.find(value=>value>4);console.log(v);//5没有符合元素,返回undefi

  • 零基础学Java(4)字符串

    零基础学Java(4)字符串字符串从概念上讲,Java字符串就是Unicode字符序列。例如,字符串"Java\u2122"由5个Unicode字符J、a、v、a和™组成。Java没有内置的字符串类型,而是

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号