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

总结

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

赞 (0)

相关推荐

  • 定时器(setTimeout/setInterval)调用带参函数失效解决方法

    首先来看下定时器的用法 1. setInterval(code,millisec[,"lang"]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 参数 描述 code 必需,要调用的函数或要执行的代码串. millisec 必需,周期性执行或调用 code 之间的时间间隔,以毫秒计.2.setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 参数 描述 code 必需,要调用

  • setInterval和setTimeout停止的方法

    先来了解 setInterval : 1,HTML DOM setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法 setInterval(code,millisec[,"lang"]) 参数 描述

  • Javascript对象中关于setTimeout和setInterval的this介绍

    在Javascript里,setTimeout和setInterval接收第一个参数是一个字符串或者一个函数,当在一个对象里面用setTimeout延时调用该对象的方法时 复制代码 代码如下: function obj() { this.fn = function() { alert("ok"); console.log(this); setTimeout(this.fn, 1000);//直接使用this引用当前对象 } } var o = new obj(); o.fn(); 然后

  • Jquery中使用setInterval和setTimeout的方法

    方法1. 应用jQuery的扩展可以解决这个问题. 复制代码 代码如下: $(document).ready(function(){$.extend({  show:function(){   alert("ready");  }});setInterval("show()",3000);}); 方法2. 指定定时执行的函数时不要使用引号和括号. 复制代码 代码如下: $(function(){function show(){   alert("ready

  • 关于setInterval、setTimeout在jQuery中的使用注意事项

    以前写定时器的时候,总是习惯直接 setInterval("fn()",2000); 最近碰到个问题,在使用jquery写定时器时,总是会出现fn不存在的错误提示,如下 $(function(){setInterval("fn()",2000);}) 解决方法是去掉引号和括号,采用最原始的方法 $(function(){setInterval(fn,2000);}) 另外一种就是在书写jq的扩展,如下 复制代码 代码如下: $(function(){ $.exten

  • Js中setTimeout()和setInterval() 何时被调用执行的用法

    定义setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数.很简单的定义,使用起来也很简单,但有时候我们的代码并不是按照我们的想象

  • JavaScript SetInterval与setTimeout使用方法详解

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码.区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInterva

  • setTimeout和setInterval的浏览器兼容性分析

    无意中测试AJAXRequest浏览器兼容性的时候,发现AJAXRequest.update方法在某些情况下在IE里有问题,经过测试找到是setTimeout和setInterval的问题. 问题出现在当调用AJAXRequest.update方法时,如果带了更新间隔及更新次数,那么在IE下面就会出现问题,具体表现为带了更新间隔时是函数工作,带上更新次数时函数无法在更新指定次数后停止执行. 测试几个例子之后找到了问题所在,在IE里,setTimeout和setInterval是不支持参数传递的.

  • JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:--(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) 复制代码 代码如下: window.setInterval(function() { foo (id); }, 1000); 这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去: 三

  • setTimeout和setInterval的区别你真的了解吗?

    setTimeout和setInterval的区别你真的了解吗?

    甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval

随机推荐