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

每次初始化时清除计时器，这样你所要做的就是再次调用该函数来重置计时器：

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 回答
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 回答
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 的强大之处：作为第一类对象的函数，将它们作为参数和返回值传递......只是函数疯狂:)

我也设置了一个工作Fiddle

于 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 回答