Как динамически обновить интервал при использовании setTimeOut?

Question

Я хочу закрыть всплывающее окно через 5 секунд. Тогда как я могу динамически обновить интервал setTimeOut (или по щелчку)?

var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ 
  myWindow.close() 
}, 3000);

Answer 1

Насколько я понимаю, вы хотите запустить тайм-аут, и если пользователь каким-то образом взаимодействует в течение этого времени, увеличьте его до 10 секунд.

Вы не можете изменить время ожидания, но можете остановить и перезапустите его с новой задержкой.

Если вы сохранили истекшее время с первого начала тайм-аута, вы можете рассчитать новую задержку, чтобы в сумме добавить до 10 секунд.

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

let timeout = null;
let timestamp = null;
$('#start').click(function() {
  let time = 5000;
  if (timestamp === null) {
    // save the current timestap 
    timestamp = +new Date;
  } else {
    // subtract the elapsed time since `timestamp` from the desired 10 seconds and restart the timer
    time = 10000 - ((+new Date) - timestamp);
    timestamp = null;
    $('#start').prop('disabled', true);
  }
  
  out(`timeout started with ${time} ms`);
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    timestamp = null;
    out('done');
    $('#start').prop('disabled', false);
  }, time);
});

function out(text) {
  $('#output').append(text + '<br/>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="start">start timeout</button><br/>
<div id="output"></div>

Answer 2

setTimeout возвращает идентификатор тайм-аута. Вы можете сохранить этот идентификатор в переменной и использовать ClearTimeout , чтобы отменить тайм-аут и установить новый.