0

我正在尝试为 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 和 web 并遇到过类似的情况，但我似乎无法让任何这些想法在这里发挥作用。我知道这可能是一个时间问题，并尝试了 setTimeout 或返回 true 来延迟事情，但它不起作用。

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

这是我的第一个从零开始的 JS。请提供具体示例，以便我可以遵循它们。数据库也没有记录，但我稍后会处理。如果您对如何改进这一点有任何其他具体建议，我会欢迎他们。

感谢您花时间提供帮助。

泰德

4

2 回答 2

0

看起来您已经在按钮单击处理程序中获得了所有代码。仅当您收到警报时，它似乎才起作用，因为警报会造成延迟的外观。

您需要将 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
}
于 2012-03-01T02:23:05.283 回答
0

在您的代码中：

  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

这通常表明更改创建的暂停正在“解决”您的问题，因此它与时间有关。

  pagetime();

现在它调用pagetime。

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

又是一个隐含的全局。

在这里，您在设置start后立即调用pagetime，可能时钟没有移动。在某些浏览器中，计时器的分辨率约为 15 毫秒，因此除非 CPU非常忙于做其他事情，或者您有机会在 15 毫秒的边界上（极不可能），否则new Date()将具有与start完全相同的值。

您还可以将作业分配为：

  time = (new Date()) - start;

但时间几乎肯定会为零，bhamlin 有解决办法。

于 2012-03-01T02:32:39.313 回答