0

Web アプリ用の単純な JavaScript ページ タイマーを作成しようとしています。タイマーは、ボタンを押したとき (ユーザーがページに入ったとき) の時間を記録し、ボタンを押したとき (ユーザーがページを離れたとき) に再び時間を記録します。ページで費やしたユーザー。ページに 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 に答える