博客逐步迁移到,独立博客,原文地址,http://www.woniubi.cn/js_hide_tab_setinterval/

我们一直都在说,JS的定时非常的不准确,但是很少有人去验证他,今天我就来验证一下。首先我们准备一个简单的例子。

简单例子

每隔一秒钟,然后输出离最开始的时间差距有多大。

 <script type="text/javascript">
var begin = (new Date()).getTime();
var i = 0;
setInterval(function(){
++i;
var now = (new Date()).getTime();
var intvals = ((now - begin)/1000).toFixed(3);
var str = "num:" + i + ";use time:" + intvals;
console.log(str);
},1000);
</script>

  

然后我们看一下输出结果。

看起来结果这没有什么呀,每次只是延时1ms而已,对于我来说,没有什么影响。

世界不可能永远都是平静的,当资源变成了稀缺,竞争加剧的时候,一切都不是那么美好了。

非活动Tab

非活动Tab,就是非当前Tab。浏览器有一种机制,就是优先保证当前Tab资源优先使用。我们可以换一种方式说。

活动Tab,相当于太子,其他的都是一些阿哥。如果太子吃肉,阿哥可以也干粮。太子连干粮也吃的话,阿哥们只能喝汤了,还是一些阿哥抢着喝汤。没办法,资源就是这么多,不是我不想给你。

这个例子也很简单,就是活动Tab干一件非常消耗CPU的事情,然后我们过一会去观察我们刚才的Tab。

for(var i = 0;i!=100000;++i){
console.log(i);
}

这次结果就不是那样简单了,看看,这是多么不靠谱的定时呀。

活动Tab

其实你也许说这不能反应问题,如果非活动页面如果做耗时CPU,活动页面定时一样不准?我就做了这么一个测试。结果是这样的

活动Tab就是不一般呀,延时只是稍微变慢了一点。

JS的定时到底有多不准的更多相关文章

  1. JS中new到底发生了什么

    outline prototype 与 __proto__ function 与 object new 到底发生了什么 prototype 与 __proto__ 首先说下在JS中比较容易让人困惑的  ...

  2. js的arguments到底是什么?

    类数组对象:arguments 总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments ...

  3. js 中this到底指向哪里?

    其实js的this指向很简单.我们记住下面3种情况. this 指向的是浏览器中的window.代码如下: function fn(){ this.name='yangkun'; this.age=2 ...

  4. js中‘0’到底是 true 还是 false

    if ('0') alert("'0' is true");  if ('0' == false) alert("'0' is false");结果是,两次都 ...

  5. JS 循环定时的一些思考

    网上也有例子, function doSetTimeout(i) { setTimeout(function() { console.log(i); }, 1000); } for (var i = ...

  6. 转自知乎大神----JS 的 new 到底是干什么的?

    大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物. 今天我从「省代码」的角度来讲 new. --------------------- ...

  7. js实现定时调用的函数setInterval()

    setInterval是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval被调用或窗口被关闭 定义 ...

  8. js手动定时清除localStorage

    <script type="text/javascript"> // 假设要保存变量 a 的值,过期时间为 3600秒 // 保存值 var obj = new Obj ...

  9. js设置定时执行

    具体语法参考:https://www.runoob.com/jsref/met-win-setinterval.html var timer = window.setInterval(function ...

随机推荐

  1. luogu3911 最小公倍数之和(莫比乌斯反演)

    link 给定\(A_1,A_2,\dots,A_N\),求\(\sum_{i=1}^N\sum_{j=1}^Nlcm(A_i,A_j)\) \(1\le N\le 50000;1\le A_i\le ...

  2. 各种Helper代码

    1.读取XML文件 /// <summary> /// 读取XML配置文件类 /// </summary> public class XmlHelper { private s ...

  3. JIRA安装部署说明

    参考  https://blog.51cto.com/tiantiantesting/1744175 前提:已安装好JDK.MySQL JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问 ...

  4. flask-----No such file or directory绝对路径与相对路径

    No such file or directory: '\\uploads\\03.jpeg' 相对路径:加点,或者直接绝对路径(尽量使用绝对路径,通过python的os模块获取当前文件绝对路径) o ...

  5. JAVA第二个程序

    关于计算基础问题华氏度与摄氏度互相转化问题 题目内容: 写一个将华氏温度转换成摄氏温度的程序,转换的公式是: °F = (9/5)*°C + 32 其中C表示摄氏温度,F表示华氏温度. 程序的输入是一 ...

  6. datatables通过ajax调用渲染数据,怎么根据数据给td添加class

    html: <table id="table8" cellpadding="0" cellspacing="0" border=&qu ...

  7. Photoshop入门教程(四):混合模式

    学习心得:混合模式在Photoshop常容易被忽视,最大原因就是它所处的位置比较隐蔽,在图层面板左上部的角落里.使用混合模式,决定图像中上图层像素如何与图像中的下层像素进行混合,使图层的叠加更加炫酷. ...

  8. 1.Ioc&DI和Spring

    1.面向对象回顾和案例 面向对象程序设计:1 2 3 4 案例分析: 需求分析: 报表功能:     报表服务类,检索数据,并生成图标     报表生成器类,生成不同格式的报表文件,例如PDF格式.H ...

  9. Java发送http请求(get 与post方法请求)

    转载:https://www.cnblogs.com/zzw1994/p/5140538.html

  10. vue环境搭建(一)

    1.Vue依赖node npm命令执行,需要下载node 下载地址 2.安装全局vue-cli脚手架(搭建环境所需要模板),  window+ r 打开命令工具,输入cmd  ,这时显示命令行工具,输 ...