jQuery reset setInterval timer

Mein 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.. 
});

Ich soll der timer zurückgesetzt werden, wenn darauf geklickt wurde #zurücksetzen.

InformationsquelleAutor Rails beginner | 2012-08-02

javascript jquery

Müssen Sie lassen Sie Ihren "timer" - variable in einem Bereich, der verfügbar ist, wenn Sie das nächste mal rufen der myTimer-Funktion, so können Sie löschen Sie den vorhandenen Intervall und setzen Sie es mit einem neuen Intervall. Versuchen:

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();
});

-1 hässliche Lösung mit der globalen var...
Ich akzeptiere Ihre Antwort.
Hervorragende code. Danke.

InformationsquelleAutor Matt

oder Sie könnten etwas entlang diesen Linien:

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;
}();

und laufen, wenn Sie müssen:

myTimer.set();
myTimer.reset();

könnte wahrscheinlich nicht die Mühe mit var that an alle

InformationsquelleAutor GnrlBzik

Konnten Sie wieder schreiben Sie Ihre myTimer() Funktion etwa so:

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();
}

Nun, wenn Sie rufen myTimer(), die setInterval wird zurückgesetzt.

InformationsquelleAutor jAndy

Klar den timer jedes mal, wenn es zuerst entsprechend formatiert, so alle Sie tun müssen ist, rufen Sie die Funktion erneut, um den timer zurückzusetzen :

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);
});

GEIGE

InformationsquelleAutor adeneo

0

Hier ist ein Ansatz, der mehr im Einklang mit der Art und Weise JS entwickelt wurde (als eine funktionale Sprache, die für diejenigen, die immer noch nicht wissen). Anstatt sich auf eine Globale variable mit einem Verschluss:
```
$("#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
});
```
Nun ich gebe zu das ist eher chaotisch (und ungetestet), aber auf diese Weise gibt es reset-Ereignis ist nur dann verfügbar, wenn es notwendig ist, und Sie sind nicht mit alle globals. Aber entscheidend ist, dass dies ist, wo JS macht liegt: Funktionen als 1. - Klasse-Objekten, indem Sie als Argumente und Rückgabewerte... nur go-Funktion-verrückt 🙂

Ich habe eine funktionierende Fiddle, zu
- ich mag, nehmen Sie auf, aber dieser ist etwas unleserlich : )
- Es ist auf den ersten... aber heute bin ich so viel zu schreiben JS, Tausende von Zeilen (nicht jQuery, sondern Reine JS) und Sie sich wirklich gewöhnen. einfach ignorieren die vielen Klammern und konzentrieren sich auf die return function Zeilen, in der Regel nur über Ihnen, die anonym Funktion der Verschluss beginnt, und unten, Sie sehen die Argumente ein. Dieser Ansatz ermöglicht es Ihnen auch passieren DOM-Referenzen als argument. wie dieser code steht auf jedem Intervall $('#timer').text(sec--); durchsucht den dom wieder, in der Erwägung, dass die übergabe der Referenz geschieht nur einmal, unabhängig von der Anzahl der Intervall-Aufrufe: großer performance-Vorteil
- ich fühle mich ya, kommen gerade vom Kaffee-Skript, schön Formatierung für meine Augen, und alle, die Magie zu Verpacken.
InformationsquelleAutor Elias Van Ootegem
0

Können Sie auch ein jQuery timer plugin, dann brauchst du nicht zu übergeben, um die Variablen.

Plugin: http://archive.plugins.jquery.com/project/timers

Beispiel für das plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

InformationsquelleAutor agrafix

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.