首页新闻找找看学习计划

js定时器-----离开当前页面原本匀速运动的div加速了,回到页面若干时间恢复匀速???

0
[已解决问题] 解决于 2019-07-30 15:35

求答

  • 下面是我的js代码
 window.onload = function () {
        let cube = document.querySelector('.cube')
        let timer = null
        let x = 0; y = 0;
        function rotate() {
            cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)';
            x += 30
            y += 45
        }
        function stop() {
            clearInterval(timer)
        }
        clearInterval(timer);
        timer = setInterval(() => {
            rotate();
        }, 1000);
    }
JS
wwj007的主页 wwj007 | 菜鸟二级 | 园豆:245
提问于:2019-07-26 14:11
< >
分享
最佳答案
0

加速,说明离开浏览器当前页,定时器没有被清除,就需要监听页面是否在浏览器当前页。

用documen.hidden来判断

  • 不考虑兼容性写法:

   document.addEventListener("visibilitychange", function () {
            if (!document.hidden) {   
               //处于当前页面
                timer = setInterval(() => {
                    rotate();
                }, 1000);
                console.log('active');
            } else {
                clearInterval(timer);
                console.log('hidden');
            }
        });
  • 如果考虑兼容性

         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]) {
                rotate();  //无间隙旋转
                timer = setInterval(() => {
                    rotate();
                }, 1000);
                console.log(hiddenProperty);
            } else {
                clearInterval(timer)
                timer
            }
        }
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);
wwj007 | 菜鸟二级 |园豆:245 | 2019-07-26 15:36

我丢 楼下就是你本人写的啊

仙乄 | 园豆:202 (菜鸟二级) | 2019-07-26 16:53

@仙乄: 嗯,是的,因为自己提问了后也自己想了为什么,就写下了自己的思路,小白刚刚开始学习,谢谢指教喽

wwj007 | 园豆:245 (菜鸟二级) | 2019-07-30 14:56

@wwj007: 我也是呢 加油呀

仙乄 | 园豆:202 (菜鸟二级) | 2019-08-09 14:48
其他回答(1)
0

你离开当前页面时js里面的定时器仍然在运行
但是css旋转动画没执行 角度一直在增加 所以才会重新点进来的时候加速
离开时关闭定时器 进入时重新开启就好了

仙乄 | 园豆:202 (菜鸟二级) | 2019-07-26 15:32

动画没有执行是因为页面不是浏览器当前页时,dom消失吗?我写了一种解决方法,但是回到页面会出现停顿1s后恢复,这怎么解决呢?

支持(0) 反对(0) wwj007 | 园豆:245 (菜鸟二级) | 2019-07-26 16:07

@wwj007: 其实楼下的方法就可以 你是解决的dom消失 他是解决的js执行
1s停顿是因为你定时器是1s一次 你只要在定时器前面 调用一次 rotate()方法就好了

  window.onload = function () {
        cube = document.querySelector('.cube')
        let timer = null
        let x = 0; y = 0;
        function rotate() {
            cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)';
            x += 30
            y += 30

        }
        function stop() {
            clearInterval(move)
        }
        clearInterval(timer);
        rotate();
        timer = setInterval(() => {
            rotate();
        }, 1000);
        document.addEventListener("visibilitychange", function () {
            if (!document.hidden) {
                //处于当前页面
                rotate();
                timer = setInterval(() => {
                    rotate();
                }, 1000);
                console.log('active');
            } else {
                clearInterval(timer);
                console.log('hidden');
            }
        });
    }
支持(0) 反对(0) 仙乄 | 园豆:202 (菜鸟二级) | 2019-07-26 16:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册