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 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
javascript arguments使用示例
Dec 16 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
微信小程序实现人脸识别
May 25 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php验证码生成器
2017/05/24 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
档案室主任岗位职责
2014/02/12 职场文书
学校后勤岗位职责
2014/02/19 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
项目安全员岗位职责
2015/02/15 职场文书
Oracle使用别名的好处
2022/04/19 Oracle