如果 X 秒没有 activity，则 运行 切换类名的函数。如果 activity，停止切换功能并在 activity 计时器中重置

Question

在输入 activity 100 秒后，我想要 运行 一个每 10 秒切换类名 "show" 的函数。 （'show' 类名使模态出现）。

If/when 有用户 activity，我想删除 'show' 类名（如果它当前已打开）并停止 10 秒切换循环功能。我希望只有在进入 activity 100 秒后才能再次切换到 运行。

我似乎无法让切换循环功能在用户 activity 时停止。切换周期一直持续到 运行。任何帮助，将不胜感激！这是我拥有的：

var el = document.querySelector('#element');
var toggle = function() {
    el.classList.toggle('show');
}

function toggleTimer() {
    var u;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;
    window.ontouchstart = resetTimer;
    window.onclick = resetTimer;
    window.onkeypress = resetTimer;
    window.addEventListener('scroll', resetTimer, true); 

    function toggleCycle() {
        setInterval(toggle, 10000);
    }

    function resetTimer() {
        clearTimeout(u);
        u = setTimeout(toggleCycle, 100000);
        el.classList.remove('show');
        clearInterval(toggleCycle);
    }
}

toggleTimer();

Answer 1

您可以使用添加到 .show 的 CSS 动画而不是处理 setInterval。
此外，您的代码可能更简单（请参阅下面的代码片段）：

请注意，我减少了时间，以免让您等待 100 秒。

var el = document.querySelector('#element');
var timer = 5000, tick = 1000;
const resetTimer = () => (timer = 5000) && el.classList.remove('show');
  
['load', 'touchstart', 'mousedown', 'mousemove', 'keydown', 'scroll']
.forEach(e => document.addEventListener(e, resetTimer));

setInterval(() => (timer -= tick) || el.classList.add('show'), tick);

h1:not(.show) {display: none}

.show {animation: togg 2s linear infinite alternate}

@keyframes togg {
  40% {opacity:1}
  50% {opacity:0}
  100% {opacity:0}
}

<h1 id="element">SHOW</h1>