[英]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();
问题是变量的范围。 您需要在更高级别定义它们,以便每个函数都可以访问它
当你宣布你在内部screensaverRun
与screensaverBuildUp = 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.