[JavaScript] 2 abhängige Timer

DOWNandOUT · 27. März 2012

2 abhängige Timer

Hey, stehe grad vor nem kleinen Problem..

Ich habe 2 Timer. Einer ruft quasi ne Create() Funktion auf und einer ne Destroy() Funktion.

Allerdings sollte der Destroy Timer vom Create Timer abhängig sein. Also wenn der CreateTimer aktiviert wird, soll der DestroyTimer auch aktiviert werden und der CreateTimer deaktiviert. Und wenn die Destroy() Funktion ausgelöst wird, soll sie den CreateTimer wieder starten.

Allerdings habe ich grad kP wie man das umsetzen kann mit JS. Habe das jQuery Plugin Timers, damit kann ich zwar Timer erstellen und auch nen Timer stoppen, allerdings nicht wieder starten es sei denn ich ruf den Timer neu auf, aber wie soll das klappen ?

Vielleicht seh ich aber auch grad den Wald vor lauter Bäumen nicht, wäre cool wenn mir da jemand helfen könnte

MfG

Anzeige

Murdoc · 27. März 2012

AW: 2 abhängige Timer

[g]javascript setTimeout[/g]?

°EraZoR° · 27. März 2012

AW: 2 abhängige Timer

Bzw. eher:

SELFHTML: JavaScript / Objektreferenz / window

MfG

DOWNandOUT · 27. März 2012

AW: 2 abhängige Timer

Ja das hab ich ja quasi schon, aber das Problem ist, das ich will wenn der 2te Timer aufgerufen wird der erste gestoppt wird, und neu anfangen soll zu "zählen"

MArc · 27. März 2012

AW: 2 abhängige Timer

Sollte doch so kein Problem sein, oder?

Code:


function timer1(){}

function timer2(){
 clearTimeout(timer1Id);
 setTimeout(timer1, 100);

 //do timer2 stuff
}


window.timer1Id = setTimeout(timer1, ...);
window.timer2Id = setTimeout(timer2, ...);

Murdoc · 27. März 2012

AW: 2 abhängige Timer

hier ein kleines script:

Code:

function Timer(ms, fn) {
 if (typeof fn !== 'function')
 throw new TypeError('object must be callable');
 
 this.ms = ms;
 this.fn = (function(fn) { 
 return function() {
 fn();
 this.fire('done');
 }.bind(this)
 }).call(this, fn);
 
 this.events = { start: [], stop: [], done: [] };
}

Timer.prototype = {
 constructor: Timer,
 
 timer: null,
 
 on: function on(reg, fn) {
 this.events[reg].push(fn);
 return this;
 },
 
 off: function off(reg, fn) {
 this.events[reg] = this.events[reg].filter(
 function(val, idx) { return val !== fn; }
 );
 
 return this;
 },
 
 fire: function fire(reg) {
 this.events[reg].forEach(function(val) { val.call(this); }, this);
 return this;
 },
 
 start: function start() {
 this.timer = setTimeout(this.fn, this.ms);
 return this.fire('start');
 },
 
 stop: function stop() {
 clearTimeout(this.timer);
 return this.fire('stop');
 }
};

api:

Code:

var timer1 = new Timer(1000, function() { /* mach was */ }),
 timer2 = new Timer(1000, function() { /* mach was anderes */ });
 
timer1.on('done', function() { timer2.start(); });

// starten
timer1.start();

// abbrechen
timer1.stop();

// erneut starten
timer1.start();

timer2 wird nur aktiv wenn timer1 ausgeführt wurde

DOWNandOUT · 27. März 2012

AW: 2 abhängige Timer

Zitat von Murdoc: ↑

hier ein kleines script:

Code:

function Timer(ms, fn) {
 if (typeof fn !== 'function')
 throw new TypeError('object must be callable');
 
 this.ms = ms;
 this.fn = (function(fn) { 
 return function() {
 fn();
 this.fire('done');
 }.bind(this)
 }).call(this, fn);
 
 this.events = { start: [], stop: [], done: [] };
}

Timer.prototype = {
 constructor: Timer,
 
 timer: null,
 
 on: function on(reg, fn) {
 this.events[reg].push(fn);
 return this;
 },
 
 off: function off(reg, fn) {
 this.events[reg] = this.events[reg].filter(
 function(val, idx) { return val !== fn; }
 );
 
 return this;
 },
 
 fire: function fire(reg) {
 this.events[reg].forEach(function(val) { val.call(this); }, this);
 return this;
 },
 
 start: function start() {
 this.timer = setTimeout(this.fn, this.ms);
 return this.fire('start');
 },
 
 stop: function stop() {
 clearTimeout(this.timer);
 return this.fire('stop');
 }
};

api:

Code:

var timer1 = new Timer(1000, function() { /* mach was */ }),
 timer2 = new Timer(1000, function() { /* mach was anderes */ });
 
timer1.on('done', function() { timer2.start(); });

// starten
timer1.start();

// abbrechen
timer1.stop();

// erneut starten
timer1.start();

timer2 wird nur aktiv wenn timer1 ausgeführt wurde

Danke, funktioniert perfekt
BW's als dankeschön sind raus

closed 8) mfg

Murdoc · 27. März 2012

AW: 2 abhängige Timer

kleine verbesserung:

Code:

function Timer(ms, fn) {
 if (typeof fn !== 'function')
 throw new TypeError('object must be callable');
 
 this.ms = ms;
 this.fn = this.proxy(fn);
 
 this.events = { start: [], stop: [], done: [] };
}

Timer.prototype = {
 constructor: Timer,
 
 timer: null,
 
 on: function on(reg, fn) {
 this.events[reg].push(fn);
 return this;
 },
 
 off: function off(reg, fn) {
 this.events[reg] = this.events[reg].filter(
 function(val, idx) { return val !== fn; }
 );
 
 return this;
 },
 
 fire: function fire(reg) {
 this.events[reg].forEach(function(val) { val.call(this); }, this);
 return this;
 },
 
 start: function start() {
 this.timer = setTimeout(this.fn, this.ms);
 return this.fire('start');
 },
 
 stop: function stop() {
 clearTimeout(this.timer);
 return this.fire('stop');
 },
 
 proxy: function proxy(fn) {
 return function() {
 fn();
 this.fire('done');
 }.bind(this);
 }
};

und zusätzlich noch ein "managed timer"

Code:

function ManagedTimer(ms, fn) {
 Timer.call(this, ms, fn);
}

ManagedTimer.prototype = {
 constructor: ManagedTimer,
 
 proxy: function proxy(fn) {
 return function() {
 fn(this.fire.bind(this, 'done'));
 }.bind(this);
 }
};

// joa, js halt
(function(undefined) {
 var tp = Timer.prototype,
 mp = ManagedTimer.prototype;
 
 Object.keys(tp).forEach(
 function(prop) {
 if (mp[prop] === undefined)
 mp[prop] = tp[prop];
 }
 );
})();

api:

Code:

var mtimer = new ManagedTimer(1000, function(done) { 
 /* mach was */ 
 
 // wenn du fertig bist (z.b. mit ajax-anfragen etc..)
 done(); 
});

mtimer.start();

Nützliche Suchen

[JavaScript] 2 abhängige Timer

Videos zum Themenbereich