PC 上的 Firefox、Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout、setInterval)间隔最小值改为 1 秒以上;而移动设备上的浏览器往往会直接冻结未激活页面上的所有定时器」。今天继续聊一聊 JavaScript 定时器与移动 Web 这个话题。

计时器

最简单的计时器只需要一个时间变量和固定间隔运行的函数就可以了,定期把上一次时间(默认为系统初始时间)加上运行间隔就是当前时间了。在 PC 上,这样实现的计时器只要运行间隔没有小于 1s,多半没什么大问题。但移动端不一样,只要页面不在前台显示,计时器就彻底不走了。

这个问题很容易解决,只要把定时器函数里的时间累加逻辑,换成每次都从系统时间获取就可以了。那如果系统时间不准怎么办?实际上大部分智能手机,默认都会开启网络校时,而且很多人有拿手机当手表的习惯,所以移动 Web 里获取到的系统时间,相比 PC 端,要准确得多。

更严谨的做法是服务端输出页面时带上服务器时间,JS 计时器先算出这个时间与系统时间之差 Δt,之后每次都用当前系统时间 + Δt 来还原服务器时间。逻辑很简单不多介绍了,说两个问题:

1)如果定时器运行时,用户改了系统时间怎么办?这个问题有很多解决方案,但是在移动设备上却有个偷懒的办法,由于移动设备上修改系统时间几乎一定会让页面进入后台,所以我们只需要在页面「从后台切回」时刷新下页面就好了。

2)移动设备在 2G 等网络环境下,接收响应需要更长时间,很有可能 JS 从页面上拿到服务器时间,已经是几十秒之后的事情了,丧失了准确性。如果一定要解决这个问题,使用 HTML5 新增的 Navigation Timing API 来修正是一种思路。美中不足的是 Android 4.0+ 才支持,Safari 系列则从未支持过这个 API。

从后台切回

要判断移动端页面是否从后台切回有很多方案,但利用后台页面定时器被冻结这个特性,有个简便且通用的做法:

var lastTime = +new Date;
setInterval(function() {
if(Math.abs(+new Date - lastTime) > 3000) {
alert('从后台切回!');
}
lastTime = +new Date;
}, 1000);

原理很简单,每隔一段时间(如 1s)更新页面上某个变量,如果下次这个变量与当前系统时间之差大于某个阈值(如 3s),说明页面定时器肯定被冻结过,也就是说页面是从后台切回来。代码中加上 Math.abs 是因为用户可能把系统时间往回改(当然极端情况下还是会检测不出来,忽略就好了)。

另一种定时器

「不会被 iOS 停掉的网页定时器」,原理是利用不会被 iOS 冻结的<meta> 标签 refresh 功能模拟 JS 定时器,有兴趣的同学可以点这里了解下。

本文链接:https://www.imququ.com/post/mobile_web_and_js_timer.html

此文转载自:JerryQu 的小站

移动Web与js定时器暂停或不准确计时的问题解决的更多相关文章

  1. cocos2d-x JS 定时器暂停方法

    this.scheduleOnce(function(){ this.addChild(Menugobtn);//要暂停执行的代码 }, 10);

  2. JS定时器不可靠的原因及解决方案

    前言 在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行.想要知道 ...

  3. js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  4. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  5. js定时器setInterval()与setTimeout()

    js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...

  6. C#-WebForm JS定时器

    JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...

  7. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...

  8. Vue清除所有JS定时器

    Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...

  9. web前端js过滤敏感词

    web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...

随机推荐

  1. HTML基础第二天知识点整合

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 【BZOJ1812】riv(多叉树转二叉树,树形DP)

    题意:给定一棵树,每个点有权值,每条边有边权(单向边).你可以选取K个黑点,使得从每个点移动到距离他最近的黑点的花费(距离*点权)的总和最小. n<=100 k<=50 w[i],a[i] ...

  3. timingFunction

    *  动画的开始与结束的快慢,有五个预置分别为(下同): *  kCAMediaTimingFunctionLinear            线性,即匀速 *  kCAMediaTimingFunc ...

  4. ascii文件转为utf-8格式

    import codecs import os #格式转换 fhanzi1 = codecs.open(os.path.join(outputpath,"hanzi1.txt"), ...

  5. memcache与memcached介绍及安装配置

    也许大家一看到Memcache和Memcached会有点晕,这两者有什么关系又有什么区别呢,下面先给大家说下Memcached,Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应 ...

  6. ubuntu 环境变量修改和恢复总结[收藏]

    在Ubuntu中有如下几个文件可以设置环境变量/etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行./etc ...

  7. 基于TP框架的ThinkCMF,控制器display方法源码分析

    昨天在写代码的时候,看见写了无数次的模版渲染方法:$this->display(),突然很想弄清楚它是如何实现的. 今天不忙,就分析了一下. class TestController exten ...

  8. sublime txt 设置在浏览器预览

    1. 安装SideBarEnhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2. 配置预览快捷键 ...

  9. 【转】详解Python的装饰器

    原文链接:http://python.jobbole.com/86717/ Python中的装饰器是你进入Python大门的一道坎,不管你跨不跨过去它都在那里. 为什么需要装饰器 我们假设你的程序实现 ...

  10. Python学习第八天(os)

    os主要是实现文件夹的创建和管理功能 os.mkdir(path) 创建目录 os.chdir(path)改变当前工作目录 os.fchdir() 通过文件描述符改变工作目录 os.chroot() ...