JS中setTimeout和setInterval的最大延时值详解


Posted in Javascript onFebruary 13, 2017

前言

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()setInterval()这两个函数来完成。而这篇文中主要给大家介绍的是关于JS中setTimeout和setInterval最大延时值的相关问题,需要的朋友们下面来一起学习学习吧。

先来看这样一段代码:

function update() {
 loadData().then(function(data) {
  $('#content').html(data.content);
  var delay = data.nextUpdateTime - new Date();
  if (delay > 0) {
   setTimeout(update, delay);
  }
 });
}

其流程非常简单:通过AJAX加载数据后更新HTML的内容;如果有指定下次更新时间,则通过计时器在该时间点再执行一次整个流程。

要说这段代码有什么隐患的话,那就是data.nextUpdateTime与当前时间的时间差(即delay变量的值)比较小的时候,会导致内容频繁更新。但这是属于正常的业务逻辑,要优化就只能牺牲内容更新的即时性。然而这里我要说的是,当时间差非常大的时候,也会出现同样的问题。

下面模拟一下这个场景:

function log() {
 console.log('executed');
}

var nextUpdateTime = new Date();
// 设为一个月后
nextUpdateTime.setMonth(nextUpdateTime.getMonth() + 1);

var delay = nextUpdateTime - new Date();
setTimeout(log, delay);

这段代码的原意是让log函数在一个月后执行,但是运行一下就可以发现,该函数会马上执行。为什么会这样呢?

搜一下相关内容可以发现,setTimeout是使用Int32来存储延时参数值的,也就是说最大的延时值是2^31-1。一旦超过了最大值,其效果就跟延时值为0的情况一样,也就是马上执行。

这个最大的延时值已经接近一个月了,一般情况下,用户也不会长时间开着一个网页,如果真开了这么久,那就刷新一下吧:

function update() {
 loadData().then(function(data) {
  $('#content').html(data.content);
  var delay = data.nextUpdateTime - new Date();
  if (delay > 0) {
   // 限制最大延时值为一天
   var ONE_DAY = 24 * 60 * 60 * 1000;
   if (delay > ONE_DAY) {
    setTimeout(function() {
     window.location.reload();
    }, ONE_DAY);
   } else {
    setTimeout(update, delay);
   }
  }
 });
}

同样的问题也存在于setInterval中。这也算是Javascript中一个比较隐蔽的坑了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
详谈$.data()的用法和作用
Feb 13 #Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 #Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 #Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 #Javascript
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python3实现windows下同名进程监控
2018/06/21 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
业务主管岗位职责范本
2013/12/25 职场文书
粗加工管理制度
2014/02/04 职场文书
文明班级建设方案
2014/05/15 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
Python如何配置环境变量详解
2021/05/18 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers