Если в течение X секунд не выполняется никаких действий, запустите функцию, которая переключает имя класса.Если активность, остановите функцию переключения и сбросьте таймер неактивности - PullRequest
Новая
       12

Если в течение X секунд не выполняется никаких действий, запустите функцию, которая переключает имя класса.Если активность, остановите функцию переключения и сбросьте таймер неактивности

0 голосов
/ 28 ноября 2018

После 100 секунд бездействия я хочу запустить функцию, которая переключает имя класса «показывать» каждые 10 секунд.(Имя класса 'show' делает модальное отображение).

Если / когда есть активность пользователя, я хочу удалить имя класса 'show' (если оно в данный момент включено), а также остановить 10-секундную функцию циклического переключения.Я хочу, чтобы этот цикл переключения снова запускался только после 100 секунд бездействия.

Мне не удается отключить функцию циклического переключения при активности пользователя.Цикл переключения просто продолжает работать.Любая помощь будет оценена!Вот что у меня есть: 

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();

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете использовать CSS-анимацию, добавленную к .show вместо обработки 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>
...