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);
}
最佳答案
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: 我也是呢 加油呀
其他回答(1)
0
你离开当前页面时js里面的定时器仍然在运行
但是css旋转动画没执行 角度一直在增加 所以才会重新点进来的时候加速
离开时关闭定时器 进入时重新开启就好了
动画没有执行是因为页面不是浏览器当前页时，dom消失吗？我写了一种解决方法，但是回到页面会出现停顿1s后恢复，这怎么解决呢？
@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');
}
});
}