1

私は jQuery にまったく慣れていないので、それほど複雑ではないと思われることをしたいと思います。ユーザーがフォームへの入力を開始したときに 60 秒のタイマーを開始したいと考えています。タイマーが 0 になると、他の機能がトリガーされます。

私がこれまでに持っているもの：

$('form').click(function(){
        $(function(){
          var count = 60;
          countdown = setInterval(function(){
            $("p#timer").html(count);
            if (count == 0) {
              $("p#sentence").html("Time's up! You lost.");
              $("form").addClass('lost');
              clearInterval(countdown);
            }
            count--;
          }, 1000);
        });
    });

このコードは機能し、私がやりたいことを正確に実行します。唯一の問題は、ユーザーがフォームの別の部分 (別の入力など) をクリックすると、最初のタイマーと同期されていない 2 番目のタイマーが開始され、上書きされることです。基本的に、ユーザーがフォームをクリックするたびに、別のタイマーが開始され、状況が悪化します。

これを見ると、このほんの少しのコードでそれができるのはかなり理にかなっているように思えます。とはいえ、それを防ぐために何をすればいいのかわからない。

フォームにクラスを与え、ユーザーがクリックした後にそれを削除しようとしました:

$('form.timer_idle').click(function(){
        $(this).removeClass('timer_idle');
        $(function(){
          var count = 60;
          countdown = setInterval(function(){
            $("p#timer").html(count);
            if (count == 0) {
              $("p#sentence").html("Time's up! You lost.");
              $("form").addClass('lost');
              clearInterval(countdown);
            }
            count--;
          }, 1000);
        });
    });

うまくいくことを願ったが、うまくいかなかった。クラス .timer_idle は、最初のクリック後に実際に削除されましたが、その後のスクリプトの実行を停止しませんでした。

4

3 に答える 3

3

jQueryにはone、最初のイベントに対してのみハンドラーを登録する関数があります。

交換：

$('form').click(function(){

と：

$('form').one('click',function(){

この関数は他のすべての関数と同じようにドキュメントですが、その存在を認識しているのはごくわずかのようです。

ヒント：

id-selectorに追加の詳細を追加してjQueryセレクターエンジンを「支援」すると、jQueryがネイティブ関数を使用できなくなります。document.getElemenyById

$("p#sentence").html("Time's up! You lost.");

良くなります：

$("#sentence").html("Time's up! You lost.");

ドキュメント：

IDセレクターの場合、jQueryはJavaScript関数document.getElementById（）を使用します。これは非常に効率的です。h2＃pageTitleなどの別のセレクターがidセレクターに接続されている場合、jQueryは、要素を一致として識別する前に追加のチェックを実行します。

于 2012-12-30T21:47:46.727 に答える
1

電話してみてください：

$('form.timer_idle').unbind('click');

これにより、以前にバインドされたクリックイベントが削除されます。

于 2012-12-30T21:49:48.977 に答える
0

この問題は、フラグを使用するだけで解決できます

var started = false;

$('form').click(function(){
    if(started){
        return;
    }

    started = true;

    // start timer to count down
});

</p>

于 2012-12-30T22:01:08.263 に答える