Этот код JavaScript не будет выполняться должным образом, если предупреждение закомментировано.

Question

Я пытаюсь написать простой таймер страниц 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

В вашем коде:

  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;

Снова неявный глобальный.

Здесь вы звоните pagetime сразу после установки start , вероятно, часы не сдвинулись.В некоторых браузерах разрешение таймера составляет около 15 мс, поэтому, если процессор не очень занят чем-то другим или у вас есть шанс на этой границе 15 мс (крайне маловероятно), тогда new Date () будет иметьточно такое же значение, как start .

Вы также можете выполнить назначение следующим образом:

  time = (new Date()) - start;

Но time почти наверняка будет равно нулю,У bhamlin есть решение для этого.

Answer 2

Похоже, у вас есть весь код внутри обработчика нажатия кнопки.Кажется, он работает только тогда, когда у вас есть предупреждение, потому что предупреждение создает видимость задержки.

Вам нужно поместить 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
}