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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何避免离开页面时定时器加速元素运动？》，聊聊，希望可以帮助到正在努力赚钱的你。

定时器中断的解决办法

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何避免离开页面时定时器加速元素运动？》文章吧，也可关注golang学习网公众号了解相关技术文章。