繁体   English   中英

使用对象函数清除鼠标移动的间隔

[英]Clearing intervals on mouse movement with object functions

我很难解决这个问题。 我想运行一种屏幕保护程序类型的交互,如果用户空闲(没有鼠标移动)的时间超过 X 则它会运行,然后当用户处于活动状态时它会清除并停止。

我的问题是即使屏幕保护程序最初似乎在第一次空闲后工作(5 秒后空闲),从而清除/停止鼠标移动; 它立即恢复(而不是等待 5 秒),然后screensaverBuildUp间隔似乎加快(而不是每 1 秒运行一次)。

有什么想法我哪里出错了吗?

const dev = {};

dev.interactions = {

    init: function() {
        this.bindEvents();
    },

    bindEvents: function() {

        let mouseTimeout, screensaverBuildUp;
        dev.ui.body.addEventListener('mousemove', function() {
            dev.interactions.screensaverClear(screensaverBuildUp);
            clearTimeout(mouseTimeout);
            mouseTimeout = setTimeout(function() {
                dev.interactions.screensaver(screensaverBuildUp);
            }, 5000);
        });

    },

    screensaverRun: function(screensaverRun) {

        screensaverBuildUp = setInterval(function() {

            let $screensaver = document.querySelector('div.screensaver'),
                $graphics = $screensaver.querySelectorAll('img'),
                $randomGraphic = $graphics[Math.floor(Math.random() * $graphics.length)],
                $clonedRandomGraphic = $randomGraphic.cloneNode(true);

            $screensaver.style.display = 'block';

            // Math.floor(Math.random() * (max - min + 1) + min);
            $clonedRandomGraphic.removeAttribute('style');
            $clonedRandomGraphic.removeAttribute('class');
            $clonedRandomGraphic.style.top = Math.floor(Math.random() * (95 - (-5) + 1) + (-5)) + '%';
            $clonedRandomGraphic.style.left = Math.floor(Math.random() * (95 - (-5) + 1) + (-5)) + '%';
            $clonedRandomGraphic.style.transform = 'rotate(' + Math.floor(Math.random() * (360 - (-360) + 1) + (-360)) + 'deg)';
            $screensaver.appendChild($clonedRandomGraphic);

            if ($graphics.length === 50) {
                clearInterval(screensaverBuildUp);
            }

        }, 1000);

    },

    screensaverClear: function(screensaverRun) {

        clearInterval(screensaverBuildUp);

        let $screensaver = document.querySelector('div.screensaver'),
            $graphics = $screensaver.querySelectorAll('img:not(.base)');

        $screensaver.style.display = 'none';

        $graphics.forEach(function($graphic) {
            $graphic.remove();
        });

    }

};
dev.interactions.init();

问题是变量的范围。 您需要在更高级别定义它们,以便每个函数都可以访问它

当你宣布你在内部screensaverRunscreensaverBuildUp = setInterval(function(此创建的内部计时器上一个全局变量。 screensaverBuildUp ,当你清除与定时器dev.interactions.screensaverClear(screensaverBuildUp);在你的绑定功能,即仅清除变量screensaverBuildUp与声明let mouseTimeout, screensaverBuildUp;只有绑定功能,使您的全球screensaverBuildUp从来没有被清除这就是为什么你看到它运行。

我已经简化了代码来演示一个有效的解决方案。 将鼠标悬停在要运行的区域上,您将看到控制台日志。

screensaverBuildUp: null,在更高级别声明,因此您的所有函数都可以访问它,但不能访问全局变量

 const dev = {}; dev.interactions = { mouseTimeout: null, screensaverBuildUp: null, init: function() { this.bindEvents(); }, bindEvents: function() { document.querySelector("body").addEventListener('mousemove', function() { dev.interactions.screensaverClear(dev.interactions.screensaverBuildUp); clearTimeout( dev.interactions.mouseTimeout ); dev.interactions.mouseTimeout = setTimeout(function() { dev.interactions.screensaverRun(); console.log( "run screensaver timer" ); }, 3000); }); }, screensaverRun: function() { dev.interactions.screensaverBuildUp = setInterval(function() { console.log("interval fired") }, 1000); }, screensaverClear: function(screensaverRun) { clearInterval( dev.interactions.screensaverBuildUp ); console.log("screensaver cleared"); } }; dev.interactions.init();
 body { height: 4000px }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM