Question

我正在尝试为Web应用编写一个简单的JavaScript页面计时器。计时器将记录按下按钮的时间（当用户进入页面时），并在按下按钮时再次记录时间（当用户离开页面时）2次的差异将给出时间用户在页面上花了。如果他们在页面上停留的时间超过2秒，则秒数将被记录到手持设备上的本地数据库中。

我遇到的问题是，如果注释掉starttime函数中的警报，则以下代码将无效。

$(document).ready(function() {
    $('div.m1-root').click(function () {
      //simulate the pagetransition events in mobile framework
        pagename= $(this).attr('id'); 
        starttime();
    //alert("You are leaving\n" + pagename + "\n you were here for \n" + time.toFixed(0) + " seconds"); // This alert will fire but only record the proper time if the next alert is fired
    });
}); 

function starttime()
{
//create a starting timestamp, number of milliseconds since midnight Jan 1, 1970
start = new Date().getTime();
//alert(+ start); // if this alert is commented out the time is not started
    pagetime();
}

function pagetime(pagename){
time = (new Date().getTime() - start) / 1000;
//alert("you have been on " + pagename + " for \n" + time.toFixed(0) + " seconds");
//before we transition, log previous page and time
//if time is greater than 3 seconds we log it (I changed it to -1 so that I would see any figure while testing)
if (time >-1)
{
//DataBase update
db.transaction(function(tx) {tx.executeSql('INSERT INTO CBNapp_Usage VALUES (time)',function(tx,result) {},function(tx,Error) {});});   
//alert("You spent " + time.toFixed(0) + " seconds on " + pagename);
}
}

我看过SO和网络并遇到过类似的情况，但我似乎无法在这里找到任何这些想法。我知道这可能是一个计时问题，并尝试了setTimeout或返回true以延迟事情，但它不起作用。

有人可以看看代码并建议我如何才能让它正常工作？

这是我第一次从头开始JS。请提供具体示例，以便我可以关注它们。数据库也没有录制，但我稍后会继续处理。如果您对如何改进这一点有任何其他具体建议，我欢迎他们。

感谢您抽出宝贵时间提供帮助。

泰德

Answer 1

看起来你已经在按钮点击处理程序中获得了所有代码。只有在收到警报时，它才会起作用，因为警报会产生延迟。

你需要在单击处理程序之外放置starttime（），它不应该调用pagetime（）。

$(document).ready(function () {
    starttime(); // this will run as soon as the page loads
    $('div.m1-root').click(function () {
        pagetime();
        // leave the page
    });
});

function starttime() {
    start = new Date().getTime(); // start is global
}

function pagetime() {
    var time = (new Date().getTime() - start) / 1000;
    // do something with time, like logging it to your db
}

Answer 2

在您的代码中：

  pagename= $(this).attr('id');

上面将在代码执行时创建一个名为 pagename 的全局变量。如果您打算这样做，您应该在适当的范围内声明它（即全局）。但是，通常认为将其存储为对象属性或闭包并避免不必要的全局变量更好。

此外，使用效率更高：

  pagename = this.id;

该行：

  starttime();

调用 starttime 函数...

function starttime() {
  //create a starting timestamp...
  start = new Date().getTime();

同样，请确保在适当的范围内声明变量或使用其他策略来共享值。此外，您可以将 start 保留为Date对象（即不要调用 getTime ）。

  //alert(+ start); // if this alert is commented out the time is not started

这通常表明alter创建的暂停是“修复”你的问题，所以它与时间有关。

  pagetime();

现在它调用 pagetime 。

function pagetime(pagename) {
  time = (new Date().getTime() - start) / 1000;

再次是隐含的全球性。

在设置 start 之后，您立即调用 pagetime ，可能时钟尚未移动。在某些浏览器中，定时器分辨率大约为15ms，因此除非CPU 非常忙于做其他事情，否则你有机会在15ms边界（极不可能），那么 new Date（）将与 start 具有完全相同的值。

您也可以执行以下任务：

  time = (new Date()) - start;

但时间几乎肯定是零，bhamlin已经解决了这个问题。

如果警报被注释掉，则此JavaScript代码将无法正确执行。

2 个答案: