如何避免离开页面时定时器加速元素运动？

定时器中断的解决办法

当我们离开当前页面时，定时器却没有被清除，就会导致原本匀速运动的元素加速。为了解决这个问题，我们需要监听页面是否在浏览器当前页。

使用 document.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);

登录后复制

以上就是如何避免离开页面时定时器加速元素运动？的详细内容，更多请关注GTHOST其它相关文章！