前言

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

先来看这样一段代码:

  1. function update() {
  2. loadData().then(function(data) {
  3. $('#content').html(data.content);
  4. var delay = data.nextUpdateTime - new Date();
  5. if (delay > 0) {
  6. setTimeout(update, delay);
  7. }
  8. });
  9. }

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

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

下面模拟一下这个场景:

  1. function log() {
  2. console.log('executed');
  3. }
  4.  
  5. var nextUpdateTime = new Date();
  6. // 设为一个月后
  7. nextUpdateTime.setMonth(nextUpdateTime.getMonth() + 1);
  8.  
  9. var delay = nextUpdateTime - new Date();
  10. setTimeout(log, delay);

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

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

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

  1. function update() {
  2. loadData().then(function(data) {
  3. $('#content').html(data.content);
  4. var delay = data.nextUpdateTime - new Date();
  5. if (delay > 0) {
  6. // 限制最大延时值为一天
  7. var ONE_DAY = 24 * 60 * 60 * 1000;
  8. if (delay > ONE_DAY) {
  9. setTimeout(function() {
  10. window.location.reload();
  11. }, ONE_DAY);
  12. } else {
  13. setTimeout(update, delay);
  14. }
  15. }
  16. });
  17. }

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

总结

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

from:http://www.codesky.net/article/201704/183492.html

【转】JS中setTimeout和setInterval的最大延时值详解的更多相关文章

  1. Node.js中的不安全跳转如何防御详解

    Node.js中的不安全跳转如何防御详解 导语: 早年在浏览器大战期间,有远见的Chrome认为要运行现代Web应用,浏览器必须有一个性能非常强劲的Java引擎,于是Google自己开发了一个高性能的 ...

  2. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...

  3. js中setTimeout和setInterval的应用方法(转)

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  4. JS中SetTimeOut和SetInterval方法的区别?

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

  5. js中setTimeout、setInterval、 clearInterval方法简介

    setTimeout setTimeout(code, millisec) 用于在指定的毫秒数后调用函数或计算表达式. 说明: setTimeout()只执行一次code.如果要多次调用,要使用set ...

  6. Js中JSON.stringify()与JSON.parse()与eval()详解及使用案例

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...

  7. js中的事件委托(事件代理)详解

    本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...

  8. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  9. 【转】Js中的window.parent ,window.top,window.self 详解

    [转自]http://blog.csdn.net/zdwzzu2006/article/details/6047632 在应用有frameset或者iframe的页面时,parent是父窗口,top是 ...

随机推荐

  1. webpack4 系列教程(十一):字体文件处理

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十一):字体文件处理>原文地址.或者来我的小站看更多内容:godbmw.com 0. 课程介 ...

  2. Reinforcement Learning: An Introduction读书笔记(1)--Introduction

      > 目  录 <   learning & intelligence 的基本思想 RL的定义.特点.四要素 与其他learning methods.evolutionary m ...

  3. 并发之AQS

    一.概述 谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQ ...

  4. angular ng-repeat radio取值

  5. MySQL 查看执行计划

    MySQL 使用 explain + sql 语句查看 执行计划,该执行计划不一定完全正确但是可以参考. EXPLAIN SELECT * FROM user WHERE nid = 3; selec ...

  6. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  7. Python 多线程并发程序设计与分析

    多线程并发程序设计与分析 by:授客 QQ:1033553122 1.技术难点分析与总结 难点1:线程运行时,运行顺序不固定 难点2:同一段代码,再不加锁的情况下,可能被多个线程同时执行,这会造成很多 ...

  8. 山东理工大学SDUT - ACM OJ 题: Python代码 及分析

    Python基础语法学习完成,先刷基础题100道巩固 ,附 题目.代码.知识分析 题目:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index ...

  9. Android滑动冲突解决

    (1).场景一:外部滑动方向跟内部滑动方向不一致,比如外部左右滑动,内部上下滑动   ViewPager+Fragment配合使用,会有滑动冲突,但是ViewPager内部处理了这种滑动冲突   如果 ...

  10. jQuery 实现文字不停闪烁效果

    使用jQuery实现的小效果:文字不停地闪烁. var flag = true; var text= $('#blink').text(); // blink是需要闪烁的元素id function b ...