JavaScript 启动和停止计时

Question

我在 JavaScript 计时方面遇到了一些问题。基本上，我希望它在失去焦点时开始计时，当它回到焦点时，计时将停止并显示。

var start,end,isTimerOn=0;
window.addEventListener('blur', function() { //when user get out of the screen
/*Start Time when user goes out of focus*/
start = new Date().getTime();
});
window.addEventListener('focus', function() { //when user focus on the screen
if (isTimerOn==1)
{
    end = new Date().getTime();
    var time = end - start; //time will be in ms. eg: 1 sec will be 1000

    /*Convert to seconds*/
    var y=Math.round(time/1000);

    start=0; //reset
    isTimerOn=0; //reset
    alert('Execution time: ' + y  + 'secs'); //this will print the time how long the user has been away

}
});

现在 isTimerOn 变量是一个标志，将在以下情况下设置:

function ProcessThisSearch(form)
{
    //alert("OI!"); //test is js is working.
    var test=form.search.value;
    //alert(test); //test if value can be retrieved
    if (test)
    {
        isTimerOn=1;
        window.open('http://www.'+test+'.com');
    }

}

此函数 ProcessThisSearch(form) 将在以下 HTML 表单中调用:

<form align=right action="mainheader.jsp" method="POST"><input type="text" name="search"><input type="submit" value="Open Website" onClick="ProcessThisSearch(this.form)"></form>

我认为问题出在 isTimerOn 变量上。因为我已经测试了两个事件监听器并且它正在工作。仅当我添加 isTimerOn 变量时，它似乎不起作用。

Answer 1

您的 HTML 代码将设置 isTimerOn=true，仅在表单提交时设置。可能这不是您想要的。

提交表单还会将当前页面更改为 mainheader.jsp 并通过 ProcessThisSearch 函数加载另一个页面。

可能的修复方法是:

<button onClick="ProcessThisSearch(this.form)">Open Website</button>

或者

<form align=right action="mainheader.jsp" method="POST"><input type="text" name="search"><input type="submit" value="Open Website" onClick="ProcessThisSearch(this.form);return false;"></form>