setTimeout & setInterval issues

[blm126]

I seem to be having some weird problems with setTimeout and setInterval. It is most notable in firefox(http://www.webtech101.com/uploads/dd/timeout.html), but with a little more work(lots of DOM manipulation on images) it occurs in other browsers. It looks like the timeout does not occur on the correct time, then it doubles up and executes the code twice. Does anyone know a way a around this?

[ddadmin]

This sounds really familar. I had a similar issue in Firefox, and posted about it here: http://www.codingforums.com/showthread.php?t=72943 I thought they had resolved it already after my filing a bugzilla report.

[jscheuer1]

Most likely this has to do with the fact that a browser page isn't multi-threaded. What this means (as I understand it) is that - say, you have a timeout waiting to happen and you go ahead and set another one, the execution and/or the initiation of the second one may be held up until the first one is finished. Until browsers are made differently this will always be a potential problem. Best to not to rely upon more than one timeout or interval at a time.

[blm126]

Yes, I think the problem is the single-threaded design structure. Now that I know what the problem is I think I have a solution. I was messing around with this, and came up with some code.

function TimeHelpers(){
	this.timeouts = new Array();
	this.intervals = new Array();
	var this_ob = this;
	this.caller = setInterval(function(){this_ob.call_interval()},1);
}
TimeHelpers.prototype.call_interval = function(){
	for(var i = 0;i<this.timeouts.length;i++){
		this.timeouts[i]['current']++;
		if(this.timeouts[i]['current'] == this.timeouts[i]['time']){
			this.timeouts[i]['code']();
		}
	}
	for(var i = 0;i<this.intervals.length;i++){
		this.intervals[i]['current']++;
		if(this.intervals[i]['current'] == this.intervals[i]['time']){
			this.intervals[i]['code']();
			this.intervals[i]['current'] = 0;
		}
	}
}
TimeHelpers.prototype.timeout = function(code,time){
	var l = this.timeouts.length;
	this.timeouts[l] = new Array();
	if(typeof(code) == 'function'){
		this.timeouts[l]['code'] = code;
	}
	else{
		this.timeouts[l]['code'] =  new Function(code);
	}
	this.timeouts[l]['current'] = 0;
	this.timeouts[l]['time'] = time;
}
TimeHelpers.prototype.interval = function(code,time){
	var l = this.intervals.length;
	this.intervals[l] = new Array();
	if(typeof(code) == 'function'){
		this.intervals[l]['code'] = code;
	}
	else{
		this.intervals[l]['code'] = new Function(code);
	}
	this.intervals[l]['current'] = 0;
	this.intervals[l]['time'] = time;
}

Basically, it is a wrapper around setInterval to allow multiple calls while only using one. It works, but is way to slow(it is consistent though). Anyone have any improvements that could make it faster? This is a really annoying problem.

[Twey]

Rather than

                this.timeouts[l]['code'] = function(){eval(code)};

it would be more efficient to do:

                this.timeouts[l]['code'] = new Function(code);

[blm126]

Thanks Twey! Could you explain how that is better? I did a little research, and Function() constructor was described as being like eval().

[Twey]

var v = new Function("alert(5);");

is exactly the same as

var v = function() { alert(5); };

It just evaluates the function once rather than multiple times (in your code, the code is evaluated again every time the function is called).

Actually, this won't be exactly equivalent anyway, since the scope of the string code when called by set(Timeout|Interval) is window, while the scope there (by either method) will be the function in which it's evaluated. You could instead do:

                this.timeouts[l].code = Function.call(window, code);

[Twey]

Also, note case: function != Function.

[mburt]

function != Function

Isn't that only because the "new" is in front of the "Function" with a capital F?
For example, you can't say "new array[]". It has to be capitalized.

[Twey]

One can't say "new Array[]" either

ECMAScript is case-sensitive: function is a keyword, while Function is a constructor function.