9

私のJquery：

function myTimer() {
    var sec = 15
    var timer = setInterval(function() { 
    $('#timer').text(sec--);
    if (sec == -1) {
      clearInterval(timer);
      alert('done');
     } 
    }   , 1000);

}

$("#knap").click(function() {
    myTimer();
});

$("#reset").click(function() {
// set timer to 15 sec again.. 
});

#reset をクリックしたときにタイマーをリセットしたい。

4

6 に答える 6

13

次に myTimer 関数を呼び出したときに使用可能なスコープに「タイマー」変数を残す必要があるため、既存の間隔をクリアして新しい間隔でリセットできます。試す：

var timer;
functionn myTimer() {
    var sec = 15
    clearInterval(timer);
    timer = setInterval(function() { 
    $('#timer').text(sec--);
    if (sec == -1) {
      clearInterval(timer);
      alert('done');
     } 
    }   , 1000);

}

$("#knap").click(function() {
    myTimer();
});

$("#reset").click(function() {
   myTimer();
});
于 2012-08-02T15:47:22.630 に答える
9

または、これらの線に沿って何かを行うことができます：

var myTimer = function(){
    var that = this,
        time = 15,
        timer;
    that.set = function() {
        console.log('setting up timer');
        timer = setInterval(function(){
            console.log('running time: ' + time);
        },1000);
    }
    that.reset = function(){
        console.log('clearing timer');
        clearInterval(timer);
    }
    return that;
}();

必要なときに実行します。

myTimer.set（）; myTimer.reset（）;

于 2012-08-02T16:09:55.597 に答える
2

myTimer()関数を次のように書き直すことができます。

function myTimer() {
    var sec, timer = null;

    myTimer = function() {
        sec = 15;
        clearInterval( timer );

        timer = setInterval(function() { 
            $('#timer').text(sec--);
            if (sec == -1) {
              clearInterval(timer);
              alert('done');
            } 
        } , 1000);
    };

    myTimer();
}

これで、 を呼び出すたびmyTimer()にsetIntervalがリセットされます。

于 2012-08-02T15:59:49.553 に答える
2

タイマーが初期化されるたびにタイマーをクリアします。そのため、関数を再度呼び出してタイマーをリセットするだけです。

var timer;

function myTimer(sec) {
    if (timer) clearInterval(timer);
    timer = setInterval(function() { 
        $('#timer').text(sec--);
        if (sec == -1) {
            clearInterval(timer);
            alert('done');
        } 
    }, 1000);
}

$("#knap, #reset").click(function() {
    myTimer(15);
});

フィドル

于 2012-08-02T15:49:26.983 に答える
0

これは、JSが設計された方法とより調和したアプローチです（まだ知らない人のための関数型言語として）。グローバル変数に依存するのではなく、クロージャを使用します。

$("#knap").click(function start()//named callback to bind && unbind:
{
    $(this).unbind('click');//no need to start when started
    $("#reset").unbind('click').click((function(timer)
    {//timer is in scope thanks to closure
       return function()
       {//resets timer
          clearInterval(timer);
          timer = null;
          $('#knap').click(start);//bind the start again
          //alternatively, you could change the start button to a reset button on click and vice versa
       }
    })(setInterval((function(sec)
       {
           return function()
           {
               $('#timer').text(sec--);
               if (sec === -1)
               {
                   $('#reset').click();//stops interval
                   $('#reset').unbind('click');//no more need for the event
                   alert('done');
               }//here's the interval counter: 15, passed as argument to closure
           })(15),1000)));//set interval returns timer id, passed as argument to closure
});

これはかなり厄介な（そしてテストされていない）ことを認めますが、この方法では、リセットイベントは必要な場合にのみ使用可能であり、グローバルを使用していません。しかし重要なのは、これがJSの力のあるところです。ファーストクラスのオブジェクトとして機能し、引数と戻り値としてそれらを渡します...関数に夢中になるだけです:)

私も動作するフィドルを設定しました

于 2012-08-02T16:10:10.420 に答える
0

jQuery タイマー プラグインを使用することもできます。その場合、変数を渡す必要はありません。

プラグイン: http://archive.plugins.jquery.com/project/timers

プラグインの例: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

于 2012-08-28T21:03:56.243 に答える