Results 1 to 10 of 10

Thread: setTimeout & setInterval issues

  1. #1
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default setTimeout & setInterval issues

    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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    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.
    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.
    Last edited by blm126; 01-02-2007 at 02:38 AM. Reason: Updated code Twey posted

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Rather than
    Code:
                    this.timeouts[l]['code'] = function(){eval(code)};
    it would be more efficient to do:
    Code:
                    this.timeouts[l]['code'] = new Function(code);
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

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

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    var v = new Function("alert(5);");
    is exactly the same as
    Code:
    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:
    Code:
                    this.timeouts[l].code = Function.call(window, code);
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Also, note case: function != Function.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Quote Originally Posted by Twey
    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.
    - Mike

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

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

    ECMAScript is case-sensitive: function is a keyword, while Function is a constructor function.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •