Проблемы с setTimeout/clearTimeout

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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

Не уверен, что это нарушает правильное правило кодирования хорошей практики, но я обычно выхожу с этим:

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

Это предотвращает необходимость объявлять таймер из функции.

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

Ответ 5

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

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 к входу.