1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

JS setInterval Problem

Svara
2013-07-15, 19:05
  #1
5kiddie
Medlem
5kiddies avatar
Hejsan, jag har ett problem som jag ej hittar svar p. Jag undrar hur man hnvisar till en gammal setInterval().

Tex om min kod ser ut s hr:
Kod: 
var z = setInterval(function(){

text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, 
},300);

document.getElementById("q").onmouseover = function (){
clearTimeout(z);
}

Om jag nu vill starta min z intervall, finns det ngon som vet hur man gr?

Allts, om jag nu ftt min intervall att sluta, finns det ngot stt att starta den igen?

Tack p frhand
Citera
2013-07-15, 19:11
  #2
gadzoox
Medlem
gadzooxs avatar
Citat:
Ursprungligen postat av 5kiddie
Allts, om jag nu ftt min intervall att sluta, finns det ngot stt att starta den igen?
Anropa setInterval igen med samma argument. Frslagsvis flyttar du ut inline-funktionen till en fristende sdan och skickar med den som argument istllet, s slipper du upprepa hela funktionsdefinitionen igen...
Kod: 
var intervalHandler = function() { ... };

var z = setInterval(intervalHandler, 300);
clearInterval(z);
z = setInterval(intervalHandler, 300);



(btw, du anropar setInterval() och clearTimeout(). Frmodligen var det clearInterval() du tnkte p...)
Citera
2013-07-15, 19:17
  #3
5kiddie
Medlem
5kiddies avatar
Tack! Var precis vad jag letade efter

och se dr vad man kan missa :S

terigen Tack!
Citera
2013-07-15, 19:27
  #4
gadzoox
Medlem
gadzooxs avatar
Sen kan du ju wrappa det en niv fr bttre enkapsulering och enklare API:
http://jsfiddle.net/KQyaR/
Citera
2013-07-15, 20:06
  #5
Povel
Medlem
Povels avatar
Citat:
Ursprungligen postat av gadzoox
Sen kan du ju wrappa det en niv fr bttre enkapsulering och enklare API:
http://jsfiddle.net/KQyaR/



En stilla frga - varfr vljer du att exponera timerRef i APIet? Och varfr inte deklarera timer-variabeln hellre n att lta den bli en property p det globala objektet?

/p
Citera
2013-07-15, 20:17
  #6
gadzoox
Medlem
gadzooxs avatar
Citat:
Ursprungligen postat av Povel
En stilla frga - varfr vljer du att exponera timerRef i APIet? Och varfr inte deklarera timer-variabeln hellre n att lta den bli en property p det globala objektet?

/p
1. Det gr jag inte, den r privat.
2. Borde ha sttt 'var' framfr ja. Svrt att n den frn knapparna d iofs, med nuvarande fulkod i form av onclick-attribut, s det var mest en quick fix.. Hela pongen var att visa enkapsuleringen, inte att diskutera globala scopet eller event-subscriptions..
Citera
2013-07-15, 20:30
  #7
Povel
Medlem
Povels avatar
Citat:
Ursprungligen postat av gadzoox
1. Det gr jag inte, den r privat.
2. Borde ha sttt 'var' framfr ja. Svrt att n den frn knapparna d iofs, med nuvarande fulkod i form av onclick-attribut, s det var mest en quick fix.. Hela pongen var att visa enkapsuleringen, inte att diskutera globala scopet eller event-subscriptions..

1) Nej, den r inte privat eftersom du tilldelar och lser this.timerRef hela tiden. Allts hamnar den i det objektet som funktionerna ligger i - d.v.s. det objekt du returnerar som API. Detta r ganska grundlggande nr det gller JavaScripts this. Se https://developer.mozilla.org/en-US/..._object_method.
Dremot r din var timerRef = null; helt oanvnd och skulle ha kunnat ha vilket innehll som helst (och frblir orrd).

2) Det r inga problem att anropa den frn knapparna ven om den deklareras med var. Varfr skulle det vara det?

/p
__________________
Senast redigerad av Povel 2013-07-15 kl. 20:35.
Citera
2013-07-15, 20:42
  #8
gadzoox
Medlem
gadzooxs avatar
1. S genom att bara skippa 'this.' verallt hade den 'lokala' variabeln anvnts istllet och det hade blivit en fungerande closure? Si dr, d har ven gammgubben lrt sig n nytt! Ha e no fr insnad p klassisk OOP egentligen, dr hade ju saker fungerat som tnkt. Men di ju s bekvma, di gamla statiskt typade, kompilerade sprken.


2. Scope, var tanken. Men jag har ju lite otur ibland nr jag tnker...
Citera
2013-07-15, 21:04
  #9
Povel
Medlem
Povels avatar
Citat:
Ursprungligen postat av gadzoox
[...]

2. Scope, var tanken. Men jag har ju lite otur ibland nr jag tnker...


Dr knner jag igen mig! Skulle behva ha unit-tests (eller liknande) av mig sjlv emellant.

ONT:

Hr r en variant som kan skapa flera oberoende intervallhanterare om man vill:

Kod:
var ticker = (function () {
  function Ticker(action, interval) {
    this.action = action;
    this.interval = interval;
    this.ref = void 0;
  }
  Ticker.prototype = {
    "constructor": Ticker
    , "start": function () {
        this.ref || (this.ref = setInterval(this.action, this.interval));
    }
    , "stop": function () {
        this.ref && (this.ref = clearInterval(this.ref));
    }
  };
  return {
    "create": function (action, interval) {
      return new Ticker(action, interval);
    }
  };
})(); 

En ticker skapas genom att man skickar in en funktion och ett intervall (i ms.). Sedan kan den startas och stoppas.

Kod:
function intervalHandler() {console.log(+new Date);}
var t = ticker.create(intervalHandler, 1000);
t.start();
// t.stop(); // senare..

// gr ocks bra att skapa flera andra:
var t2 = ticker.create(function () {console.log("t2");}, 5000)
  , t3 = ticker.create(function () {console.log("t3");}, 2000);
t2.start();
t3.start(); 

Anvndning passande med gadzoox HTML fr att testa:

Kod:
var target = document.getElementById("output");
var timer = ticker.create(function () {
  target.innerHTML += "tick ";
}, 300); 

Knapparna startar och stoppar d allts tickern vid namn timer.

/p
__________________
Senast redigerad av Povel 2013-07-15 kl. 21:09. Anledning: variabelnamnfix
Citera
2013-07-16, 02:18
  #10
trellen
Medlem
Ett tips r att undvika setInterval fr om funktionen du anropar skulle ta lngre tid n intervallet s kommer hela webbsidan lagga. Det bsta du kan gra r att skriva en omslutande funktion som anvnder setTimeout istllet.
Citera
2013-07-16, 07:33
  #11
gadzoox
Medlem
gadzooxs avatar
Citat:
Ursprungligen postat av Povel
...
Snyggt!
Citera
Svara

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in