zoukankan      html  css  js  c++  java
  • 【转】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中一个比较隐蔽的坑了。

    总结

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

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

  • 相关阅读:
    Essential Phone PH1官方刷机方法
    科普一下bl锁的知识,没解锁的必看!
    谷歌pixel手机解BL锁、刷机、破解电信(史上最详细的帖子)
    Fiddler4入门——手机抓包
    Windows10远程报错:由于CredSSP加密Oracle修正
    简单的利用JS来判断页面是在手机端还是在PC端打开的方法
    C# 之 比较两个word文档的内容
    Browsers 之 弹出窗口阻止问题
    Asp.Net 之 二维码生成
    windows Server2012 之 IIS8.0配置安装完整教程
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/9530440.html
Copyright © 2011-2022 走看看