关于移动端浏览器定时器后台停止运行的问题

最新推荐文章于 2024-01-12 15:39:05 发布
最新推荐文章于 2024-01-12 15:39:05 发布
阅读量6k 收藏 3
点赞数 2
分类专栏： h5 文章标签： 页面隐藏 后台运行 visibilityState 定时器暂停
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37937865/article/details/78356086
版权
本文探讨了在移动端浏览器中定时器在后台停止运行的问题。在微信浏览器的商城项目中，作者发现页面锁屏或后台运行时定时器暂停。为解决此问题，利用PageVisibility API的`visibilityState`和`hidden`属性，通过`visibilitychange`事件监听页面可见性变化，实现后台运行时暂停定时器，前台恢复时继续执行。这种方法适用于安卓和iOS设备，能有效控制页面资源和提高用户体验。
摘要由CSDN通过智能技术生成

关于移动端浏览器定时器后台停止运行的问题

今天在做微信浏览器端的商城项目的时候遇到了一个问题，具体场景是这样的：在页面添加了一个定时器，某项数据每秒递减，当手机锁屏或者后台运行时再返回页面，发现定时器在后台运行时停止了，返回才继续开始运行。

解决方法：
这里我是用的是一个H5的一个PageVisibility API，在这里，我们可以得到两个属性及其参数，用来表示当前页面是否可见：

  • document.visibilityState：hidden/visiable/preview
  • document.hidden：true/false

对于我的问题，我是这样解决的

document.addEventListener('visibilitychange',function() {
   
    if(document.visibilityState=='visible') {
        location.reload(
最低0.47元/天 解锁文章
是昔流芳lzh
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端倒计时切到后台切回来不继续执行的问题
weixin_33970449的博客
10-31 2098
问题描述 这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。但是在pc端没有这个问题。倒计时代码如下 let downCount = () => { if (this.count >= 1) { this....
H5进入后台运行导致定时器不能用的问题
fendoudemayi159的博客
08-21 2612
当用户需要发短信时就用到了倒计时的功能，这时就要用到循环定时器setInterval(),但是当用户切换到后台运行时定时器就停止了运行，于是考虑使用系统时间来实现这个功能。 var count = ''； var timer = null； showTime() { var oldTime = new Date().getTime() / 1000; const TIME_COUNT...
H5切换后台导致倒计时不准确，两个解决方法（1、visibilitychange、2、和客户端配合）
qq_43471467的博客
11-02 1664
需求： 1、H5嵌入app，倒计时当前月剩余时间。 2、当前时间用后端返回的时间，不能使用手机系统时间，怕用户修改系统时间。 遇到的问题：app切换后台后，倒计时暂停，导致时间与实际不符。 1、visibilitychange visibilitychange - Web API 接口参考 | MDN mounted： //切后台，再次进入会回调 let _this = this; document.addEventListener...
h5切出页面后计时器罢工问题
weixin_43888733的博客
03-25 818
如何监听H5页面切出、息屏等状态 问题：服务端返回总时间，息屏后定时器罢工 解决方案：给document绑定 事件，页面显示时请求接口实时更新数据 document.addEventListener("visibilitychange",function(){ if(document.visibilityState=="visible"){ alert("我回来了"); // 重新...
html 清除计时器 bug,【报Bug】pages页面中的定时器在app无法清除，h5可以清除
weixin_33673142的博客
06-16 180
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]页面定时器清除失败，在一个vue页面中定义了定时器，然后在页面卸载生命周期里清除定时器，清除不了，返回上个页面，定时器仍然在运行，我把定时器定义在vue的data方法里和vue外面，以及App.vue的globalData里...
5秒访问一次后台，5分钟停止访问
Elise1的专栏
12-28 974
private Timer mtimer = new Timer(true); private int timeFlag = 1;//统计访问次数，5分钟每5秒访问一次访问60次 mtimer.schedule(new TimerTask() { @Override pub
手机息屏导致 js 定时器时间不准问题及解决方法
weixin_34210740的博客
11-28 3008
这两天做迭代任务遇到了一个难题，现在找到了解决方法，为了避免忘记，在这里记录下来。 项目描述：一个基于vue写的h5页面，根据后端返回的当前服务器时间做一个倒计时（我是用setInterval 做的）。该h5页面分别嵌套到微信公众号、和原生app中。 问题描述：使用home键把页面切到后台运行，倒计时就暂停了，再切回到前台运行回去看倒计时，时间不准确（具体表现为：切出之前是20：20：20，切出等...
小程序定时器
09-01
例如，由于小程序的运行环境并非浏览器，`setTimeout` 的延迟并不精确，且可能会受到页面生命周期的影响。此外，小程序提供了 `clearInterval` 和 `clearTimeout` 方法来清除定时任务。 3. **倒计时实现** 倒计时...
美年_移动端开发旅游预约_短信验证码_预约成功页面展示
Princess_Y
12-02 1655
第一章. 移动端开发 1.1. 移动端开发方式 随着移动互联网的兴起和手机的普及，目前移动端应用变得愈发重要，成为了各个商家的必争之地。例如，我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等，以前只能通过PC端完成的事情，现在通过手机都能够实现，而且更加方便，而这些都需要移动端开发进行支持，那如何进行移动端开发呢？ 移动端开发主要有三种方式： 1、基于手机API开发（原生APP） 2、基于手机浏览器开发（移动web） 3、混合开发（混合APP） 1.1.1. 基于手机API开发 手机端使用手机API
Vue 移动端活动倒计时优化
weixin_44526331的博客
04-28 1294
前言 通常写倒计时效果，用的是 setInterval，但这会引发一些问题，最常见的问题就是定时器不准。 如果只是普通的动画效果，倒也无所谓，但倒计时这种需要精确到毫秒级别的，就不行了，否则活动都结束了，用户的界面上倒计时还在走，但是又参加不了活动，会被投诉的╮(╯▽╰)╭ 一、 知识铺垫 1. setInterval 定时器 先说本文的主角 setInterval，MDN web doc 对其...
android h5定时器延迟,H5页面中的定时器(setTimeout)问题
weixin_35696092的博客
05-26 523
项目的安卓版本为了快速开发,使用Hbuilder纯H5开发.关于setTimeout碰到的几个问题.1.页面中设置的10s定时请求服务器一次,但是服务器打出的日志,可以看到,个别时候,两次请求几乎是同时到达,但有时候,中间间隔的时间又确实是10s时间.后来发现原因,在设置定时器的时候,我直接把setTimeout放到方法的尾部.犹豫该方法中的业务逻辑相对复杂,所以在请求服务器之后,回调进去ajax...
H5跳转APP 并切换到后台问题解决
qq_40965036的博客
12-07 1154
JQ写法 原理是：首先跳转APP链接 利用定时器延迟触发跳转下载地址链接 缺点是：不能直观的知道是否打开了APP，万一用户点击了取消跳转APP或者点击后长时间无操作定时器还是会触发（如我写的代码3秒后触发下载地址链接） 难点是唤起APP后 又切换回去网页浏览器 定时器还是继续触发从而会跳到下载页面 //监听页面是否被切换到后台 document.addEventListener("visibilitychange", () => { //不管如何都刷新一遍 防止低下定时器...
H5 - - - - - 移动端息屏后setInterval定时器不工作的问题
最新发布
Dark_programmer的博客
01-12 1104
移动端息屏后setInterval定时器不工作的问题
谷歌浏览器切换页面或者隐藏页面造成定时器延缓或者停止的问题。
qq_43598475的博客
11-22 3411
使用html5的Page Visibility API来实现控制，由于浏览器本身切换页面或者缩小带来的定时器延缓，理论上是直接停止，但是实测发现只是延缓，这导致 我们不仅需要控制定时器的开启，还需要控制关闭的时间。 页面缩小或者切换其他窗口下hidden为true，清空定时器，否则开启canvas，由于浏览器一开始虽然为false但是仍然不会。 document.addEventListener(...
IOS,H5混合开发,setTimeout定时器失效
yunzhonghefei的博客
11-29 7320
项目中有需要定时请求服务器,来刷新用户新消息汇总的功能.没有使用第三方推送,暂时用app定时刷新来权宜实现. 安卓版本中使用的Hbuilder开发,使用是全部都是h5页面,不论当前是否是请求服务器的页面,该页面中的setTimeout方法都一直执行.但是在IOS中,如果当前页面不是定时器所在的页面,那么定时器就会失效.是因为离开该页面之后,该页面所在的webview就会销毁.附带说明,IOS混合
android h5app息屏定时器,完美解决移动端手机熄屏、黑屏计时器停止计算问题
weixin_42499692的博客
05-26 1995
因为浏览器安全机制问题，手机黑屏后，后台运行浏览器停止运行计时器，这里使用的是H5的一个PageVisibility API(visibilitychange)，熄屏时，开始计算黑屏时间，重启时，再次计算；另一个思路是也可使用iframe引入另一个页面代码使用全局变量进行计算时间，文本暂不深入；废话不多说，直接上代码：var timer=null;function getCode(t){var t...
浏览器切换标签js定时器会变缓慢解决办法
kongjiea笔记
05-26 9106
1、 在jq版本里每次在animate前加上  $(obj).stop(true,true);  可以解决 2、 方法二： var timer=null; window .onfocus=function(){ timer=setInterval(autoRun,1000); } window.onblur=function(){ clearInterval(timer);
H5页面隐藏到后台、息屏执行时间、微信浏览器，页面可见性事件visibilitychange
a331790021的博客
04-10 3174
document.addEventListener('visibilitychange', function () { // 用户息屏、或者切到后台运行 （离开页面） if (document.visibilityState === 'hidden') { console.log('hidden') } // 用户打开或回到页面 if (document....
php 开启定时器 关闭浏览器还会运行吗
06-06
在 PHP 中开启定时器通常是通过使用类似于 `setInterval` 或 `setTimeout` 的函数来实现的。如果是使用这种方式开启定时器，在客户端关闭浏览器后，定时器将不会继续运行，因为所有与客户端相关的操作都已经被终止了。 然而，如果你是在服务器端运行 PHP 脚本并使用定时器，那么关闭浏览器将不会影响定时器的运行，因为定时器在服务器端运行，并不依赖于客户端的连接。但是请注意，在 PHP 中开启长时间运行的定时器可能会对服务器的性能造成影响，因此建议根据实际情况谨慎使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值