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

Я пытаюсь написать простой таймер страниц JavaScript для веб-приложения. Таймер запишет время нажатием кнопки (когда пользователь заходит на страницу) и снова запишет время нажатием кнопки (когда пользователь покидает страницу). Разница в 2 раза даст время Пользователь провел на странице. Если они оставались на странице более 2 секунд, то количество секунд будет записано в локальную базу данных на руке.

У меня проблема в том, что следующий код не будет работать, если закомментировано предупреждение в функции времени запуска.

$(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. Пожалуйста, предоставьте конкретные примеры, чтобы я мог следовать им. База данных также не записывается, но я буду работать над этим позже. Если у вас есть какие-то другие конкретные предложения относительно того, как улучшить это, я бы приветствовал их.

Спасибо, что нашли время, чтобы помочь.

Тед

Источник

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
}
Источник

В вашем коде:

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

Приведенное выше создаст глобальную переменную с именем pagename при выполнении кода. Если вы хотите сделать это, вы должны объявить это в соответствующей области (то есть глобальной). Однако обычно считается, что лучше хранить его как свойство объекта или в замыкании и избегать ненужных глобальных переменных.

Кроме того, гораздо эффективнее использовать:

  pagename = this.id;

Линия:

  starttime();

вызывает функцию starttime...

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

Опять же, убедитесь, что вы объявляете переменные в соответствующей области или используете какую-то другую стратегию для совместного использования значений. Кроме того, вы можете оставить начало как объект 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 сразу после установки параметра, скорее всего, часы не сдвинулись. В некоторых браузерах разрешение таймера составляет около 15 мс, поэтому, если процессор не очень занят чем-то другим или вы случайно не достигнете этой границы 15 мс (что крайне маловероятно), тогда new Date() будет иметь точно такое же значение, что и start.

Вы также можете сделать назначение как:

  time = (new Date()) - start;

Но время почти наверняка будет ноль, у Бхамлина есть решение для этого.

Источник
Другие вопросы по тегам