Javascript timed redirect

Question

У меня есть настройка на основе переадресации, или если пользователь активен на странице или нет. Благодаря this tutorial У меня 99% работы. Есть только одна особенность, за которую я застрял.

JS является частью расширения хром Google.

Предупреждение о переадресации появляется после 2 секунд бездействия на странице, и если в течение 5 секунд не будет никакой дополнительной активности, страница перенаправляется на google.com (с помощью google.com только для целей тестирования).

После перенаправления на google.com таймер запускается снова через 2 секунды - я не хочу этого.

Я только хочу, чтобы таймер запускался, когда пользователь активен на google.com (т. Е. Касается экрана).

Нужно ли добавить дополнительную функцию stopTimer где-нибудь?

В основном я хочу, чтобы таймер находился на каждой странице отдельно от главной страницы (в данном случае google.com).

Мой код до сих пор - я создал JS Fiddle;

Переадресация google не работает в скрипте JS, но работает в моей живой среде.

var div = document.createElement("div"); 
div.style.display = "none"; 
div.style.height = "18em"; 
div.style.width = "30em"; 
div.style.marginTop = "-9em"; 
div.style.marginLeft = "-15em"; 
div.style.background = "#f2dede"; 
div.style.color = "black"; 
div.style.position = "absolute"; 
div.style.padding = "20px"; 
div.style.top = "50%"; 
div.style.left = "50%"; 
div.style.border = "5px solid #ebccd1"; 
div.style.borderRadius = "20px"; 
div.style.textAlign = "center"; 
div.style.zIndex = "9999"; 
document.body.appendChild(div); 

var timeoutID; 
var timerID; 
var idleTimeout = 5; 
var idleSecondsTimer = null; 
var idleSecondsCounter = 0; 

function setup() { 
    this.addEventListener("mousemove", resetTimer, false); 
    this.addEventListener("mousedown", resetTimer, false); 
    this.addEventListener("keypress", resetTimer, false); 
    this.addEventListener("DOMMouseScroll", resetTimer, false); 
    this.addEventListener("mousewheel", resetTimer, false); 
    this.addEventListener("touchmove", resetTimer, false); 
    this.addEventListener("MSPointerMove", resetTimer, false); 

    startTimer(); 
} 
setup(); 

function startTimer() { 
    // wait 2 seconds before calling goInactive 
    timeoutID = setTimeout(goInactive, 2000); 
} 

function resetTimer(e) { 
    clearTimeout(timeoutID); 
    clearTimeout(timerID);  
    goActive(); 
} 

function stopTimer(e) { 
    window.clearTimeout(timeoutID); 
} 

function goInactive() { 
    idleSecondsCounter = 0; 

    div.style.display = "block"; 
    div.innerHTML = "<strong>Inactivity detected.</strong> <p>Redirecting in <span id='countdown'>" + (idleTimeout - idleSecondsCounter) + " </span> seconds. <p>Please touch screen to cancel."; 
    // show a count down here then redirect to google.com 

    timerID = setInterval(function(){ 
     idleSecondsCounter++; 

     if(idleSecondsCounter >= 6) { 
      clearTimeout(timerID);  
      window.location.href = "http://google.com"; 
     } 
     else {    
      document.getElementById("countdown").innerHTML = (idleTimeout - idleSecondsCounter); 
     } 
    }, 1000);  
} 

function goActive() { 
    div.style.display = "none"; 
    startTimer(); 
} 

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

Любая помощь будет оценена по достоинству.

Answer 1

Ваш таймер безоговорочно запускается при загрузке страницы при выполнении setup().

Если вы хотите, чтобы это началось только после некоторого действия, просто удалите startTimer() из вашего кода setup() - при любом действии, которое вы назовете, resetTimer, который начнет процесс.