проблемы setTimeout / clearTimeout

Question

Я пытаюсь сделать страницу, чтобы перейти на стартовую страницу после, например.10 секунд бездействия (пользователь никуда не кликает).В остальном я использую jQuery, но set / clear в моей тестовой функции - чистый javascript.

В моем разочаровании я получил что-то вроде этой функции, которую я надеялся вызвать при любом щелчке по странице.Таймер запускается нормально, но не сбрасывается при нажатии.Если функция вызывается 5 раз в течение первых 10 секунд, то появятся 5 предупреждений ... no clearTimeout ...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Кто-нибудь получил несколько строк кода, которые помогут?- при любом щелчке остановить, сбросить и запустить таймер.- Когда таймер попадает, например.10 секунд сделать что-то.

Answer 1

Вам нужно объявить timer вне функции. В противном случае вы получите совершенно новую переменную при каждом вызове функции.

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Answer 2

Проблема в том, что переменная timer является локальной, и ее значение теряется после каждого вызова функции.

Вам необходимо сохранить его, вы можете поместить его вне функции, или если вы неЕсли вы хотите выставить переменную как глобальную, вы можете сохранить ее в замыкании , например:

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();

Answer 3

Это потому, что таймер является локальной переменной для вашей функции.

Попробуйте создать его вне функции.

Answer 4

Способ использования этого в реакции:

class Timeout extends Component {
  constructor(props){
    super(props)

    this.state = {
      timeout: null
    }

  }

  userTimeout(){
    const { timeout } = this.state;
    clearTimeout(timeout);
    this.setState({
      timeout: setTimeout(() => {this.callAPI()}, 250)
    })

  }
}

Полезно, если вы хотите вызывать API только после того, как пользователь, например, перестал печатать. Функция userTimeout может быть связана через onKeyUp с входом.

Answer 5

Не уверен, что это нарушает какое-то хорошее правило кодирования, но я обычно получаю следующее:

if(typeof __t == 'undefined')
        __t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

Это исключает необходимость объявлять таймер вне функции.РЕДАКТИРОВАТЬ: это также не объявляет новую переменную при каждом вызове, но всегда повторяет одно и то же.

Надеюсь, это поможет.

Answer 6

Это хорошо работает. Это менеджер, который я сделал для обработки событий удержания. Имеет события для удержания и когда вы отпускаете.

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

Параметр элемента - это тот, который вы держите. Параметр func срабатывает, когда он выполняется в течение нескольких миллисекунд, указанных параметром hold. Параметр clearfunc является необязательным, и если он задан, он будет запущен, если пользователь отпускает или покидает элемент. Вы также можете сделать некоторые обходные пути, чтобы получить нужные функции. Наслаждайтесь! :)