如何解决setInterval 与页面切换问题

setInterval 与页面切换问题

今天遇到的问题是我用好几个setInterval定时器来做模拟系统的动态表示,当打开页面时,程序能够正常运行,效果正常,但是当我切换到其他页面,过段时间再切回到系统的页面时,动画出现了错乱,不是按原来安排的运行。查了资料后,发现这是因为浏览器本着节省内存的性质,当切换到其他页面时,采油系统页面的定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况。

解决方案

我查了一部分资料,网上一般都是说如何在关闭页面的时候调用函数,比如用onbeforeunload和Onunload,但是我主要是在切换的时候出的问题,查了一上午,终于找到了监听页面切换的函数:如下所示:

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

当切换到其他页面时,控制台输出页面激活,切回来的时候,显示页面未激活,为了明确一点,我把上面代码改成

var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('切回');
    }else{
        console.log('切走')
    }
}

这里我在’切走’部分,写入clearInterval(),发现没有作用,在一会切换回来的时候依然会出现错乱。很难受。
今天到这里之后继续查找,测试,找到一篇博客上写到是两种方法:
方案1: 如果您使用的是jQuery,在jq版本里每次在animate前加上 $(obj).stop(true,true); 可以解决(可是我用的不是jQuery,)

setInterval(function(){
    $(".notice").show();
    $(".notice ul").stop(true,true).animate({"top":"-20px"},function(){
        var node = $(".notice ul li:eq(0)").remove();
        $(".notice ul").append(node);
                    $(".notice ul").css("top","0");
    });
},3500);

方案2:通过浏览器的焦点去执行该js(这个我测试过,在切换的时候并不能调用,很伤心)

var timer=null;
window .onfocus=function(){
    timer=setInterval(autoRun,1000);
}

window.onblur=function(){
    clearInterval(timer);
}

于是在这里我想用最上面写的函数来代替onfocus 和 onblur ,如下所示:

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('页面非激活');
        var timer=null;
        timer=setInterval(autoRun,1000);    
    }else{
        console.log('页面激活');
         clearInterval(timer);       
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

但是结果还是不对,显示autoRun is not defined,之前没有这个问题,估计是前面切换的时候并没有调用。
这篇文章虽然没有解决我的问题,但是希望能解决其他人的问题,同时也希望有大佬来告诉这个问题怎么办?

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
在JavaScript中,`setInterval` 是一个用于定期执行指定函数的内置方法。然而,如果使用不当或处理不当,它可能会导致页面卡顿,也就是我们常说的性能问题。以下是可能导致页面卡顿的一些原因: 1. 频繁的DOM操作:`setInterval` 中的函数如果频繁地修改DOM树,比如大量元素的添加、删除或样式更改,这会占用大量的浏览器渲染资源,使页面响应变慢。 2. 无限循环或未及时清除:如果定时器内的函数没有正确的结束条件或者没有被正确地清除(例如忘记调用 `clearInterval`),它将持续运行,直到页面关闭,这会导致CPU负载过高。 3. CPU密集型计算:如果定时器内的函数执行了复杂的运算或I/O操作,这些任务可能占用大部分处理器时间,使得页面暂停响应。 4. 错误的事件监听:如果定时器关联的事件处理函数引起了事件冒泡或阻止默认行为,而这些行为需要大量处理,也可能导致页面卡顿。 为避免这些问题,你可以采取以下措施优化: - 尽量减少DOM操作次数,尤其是当操作涉及到大量元素时。 - 在定时器内完成工作后,确保清除定时器,避免不必要的资源占用。 - 如果有循环,考虑使用 `requestAnimationFrame` 替代,因为它的执行时机更符合浏览器的渲染流程。 - 对于复杂的任务,考虑使用 Web Worker 来在后台线程中运行,减轻主线程负担。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值