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

更新时间：2017年02月13日 10:56:42 作者：Heero.Luo

这篇文章主要介绍了JS中setTimeout和setInterval的最大延时值的相关资料，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。

前言

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中一个比较隐蔽的坑了。

总结

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

您可能感兴趣的文章:

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
为大家介绍一款JS截图插件html2canvas.js，它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法，并为大家提供了一个实例
2020-01-01
laypage.js分页插件使用方法详解
这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
uni-app常用的几种页面跳转方式总结
uni-app的页面跳转和小程序和vue很相似,只是方法和标签有所不同,这篇文章主要给大家介绍了关于uni-app常用的几种页面跳转方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
element ui分页多选,翻页记忆的实例
今天小编就为大家分享一篇element ui分页多选,翻页记忆的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
前端语法高亮插件Prism.js使用详细教程
最近项目有代码高亮的需求,这边是选用Prism.js来进行代码高亮,Prism是一款轻量级、可扩展的语法高亮器,根据现代 Web 标准构建,应用广泛,这篇文章主要给大家介绍了关于前端语法高亮插件Prism.js使用详细教程的相关资料,需要的朋友可以参考下
2024-05-05
JS实现远程控制的基本原理和实现方法
远程控制是指通过网络等远距离通讯手段控制另一设备的操作行为，在现实生活中，随着物联网技术的不断发展，远程控制技术越来越重要，本文将详细介绍 JS 实现远程控制的基本原理、开发流程和实现方法,需要的朋友可以参考下
2023-06-06
Webpack的Loader和Plugin的区别
这篇文章主要介绍了Webpack的Loader和Plugin的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
Javascript实现滚动图片新闻的实例代码
这篇文章主要介绍了Javascript实现滚动图片新闻的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
几个高效，简洁的字符处理函数
几个高效，简洁的字符处理函数...
2007-04-04
Vue指令的钩子函数使用方法
这篇文章主要为大家详细介绍了Vue指令的钩子函数使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具