Javascript重定向和重置计时器

Question

JS 新手。使用倒数计时器和警报。

尝试创建一个在 5 秒不活动后弹出的警报，并在单击 Yes 时弹出 - 您将被重定向到某个 URL。当点击Cancel 时，计时器将被重置，您可以停留在页面上（直到计时器用完，等等）。

代码将在 Google 扩展程序中使用。

到目前为止，我的代码如下 - 我已经为 JS 小提琴发疯了。单击“取消”时，计时器重置不起作用。

如果有人可以提供任何建议，我将不胜感激。

http://jsfiddle.net/johnny_s/c7h1qf49/

我的myscript.js

var div = document.createElement("div");
div.id = "timer";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "50%";
div.style.left = "50%";
div.innerHTML = "Hello";
document.body.appendChild(div);

var IDLE_TIMEOUT = 5; //seconds
var _idleSecondsTimer = null;
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {

    _idleSecondsCounter++;

    var oPanel = document.getElementById("timer");

    if (oPanel) oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";

    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(_idleSecondsTimer);

        if (confirm('You are being redirected due to inactivity - click Cancel for more time, or OK to go to home page?')) {
            //test go to google
            document.location.href = "http://www.google.com";
        } else {
            //reset the timer to 5
        }

    }
}

我的manifest.json 如下所示；

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 2,

  "name": "Idle Reset",
  "description": "Reset the browser to a single tab pointing at the home page when idle.",
  "version": "1.0.3",
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "idle"
  ],
  "options_page":   "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["zepto.min.js", "kiosk.js", "myscript.js"],
      "css": [ "reset.css"]
    }
  ]
}

Answer 1

在@sdespont 的帮助下，我得到了它的工作，并进行了一些修改。

工作代码是；

var div = document.createElement("div");
div.id = "timer";
div.style.display = "none";
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "80%";
div.style.left = "50%";
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 goInactive() {
    idleSecondsCounter = 0;

    div.style.display = "block";
    div.innerHTML = "Inactivity detected. Redirecting in ...<span id='countdown'>" + (idleTimeout - idleSecondsCounter) + "</span> ...please touch screen to close this message";
    // 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();
}