Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question how can I make it not lag? this while loop..

    Code:
    <html>
    <body>
    <script type="text/javascript">
    var now = new Date().getTime();
    var endTime = now + ((1000*60)*2); //2 minutes after now
    
    while (now <= endTime) {
    	var seconds = (endTime - now)/1000;
    	//document.write("seconds left: " + seconds);
    	//document.write("<br>");
    	now = new Date().getTime();
    }
    document.write("done");
    </script>
    </body>
    </html>
    you can run the above code with the write statements commented, or with them uncommented and it will still lag

    is it impossible to run a while loop until a certain time has elasped without lag?
    yes i'm aware of setinterval and setimout, but these are different things, the above code should still be possible as it is not an infinite loop

    How can I fix it?

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    TimeoutChainer.js
    http://trinithis.awardspace.com/Time...eoutChainer.js

    Test.html
    Code:
    <html>
    <body>
    <script type="text/javascript" src="TimeoutChainer.js"></script>
    <script type="text/javascript">
    
    var now = new Date().getTime();
    var endTime = now + ((1000*30)); // 0.5 minutes after now
    
    new TimeoutChainer({
      callback: function(tc) {
        if(now >= endTime)
          tc.clear();
        var seconds = (endTime - now) / 1000;
        document.body.appendChild(document.createTextNode("seconds left: " + seconds));
        document.body.appendChild(document.createElement("br"));
        now = new Date().getTime();
      },
      numTimes: Number.POSITIVE_INFINITY,
      args: [TimeoutChainer.SELF]
    });
    
    document.body.appendChild(document.createTextNode("done"));
    </script>
    </body>
    </html>
    Trinithis

  • #3
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the reply, I"m studying this new code/script.. but your code has some initial problems though...

    Here is the output I get:
    Code:
    done seconds left: 30
    seconds left: 29.89
    seconds left: 29.78
    seconds left: 29.76
    seconds left: 29.75
    seconds left: 29.75
    seconds left: 29.73
    seconds left: 29.72
    seconds left: 29.71
    seconds left: 29.69
    seconds left: 29.67
    seconds left: 29.63
    //keep counting down, shortened actual output to save space
    seconds left: 0.067
    seconds left: 0.047
    seconds left: 0.037
    seconds left: 0.007
    seconds left: -0.003
    The point of confusion is, why does it echo "done" before the loop commences, its supposed to echo it after the loop is done not before. And why does it have -seconds left at the end? This is also not a good sign, and not the output I wanted.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Well, to be honest, I completely forgot about setInterval despite you mentioning it. That would do a similar job. For good measure, I'll also show one using setTimeout, which is basically what TimeoutChainer does behind the scenes with a few features to spiff it up.

    As for the while-loop stalling the computer, it's probably due to the fact that JS is a single threaded language. Also, I would suspect any browser could not handle so much processing. To the browser, it creates the effects of stalling that infinite loops do. As mentioned, since JS is single threaded, any code following the loop will not be executed. Basically, your only viable solution is to use the timeouts.

    Here's a revised TimeoutChainer version, an setInterval version, and a setTimeout version of the code.

    Code:
    new TimeoutChainer({
      callback: function(tc) {
        if(now >= endTime) {
          tc.clear();
          document.body.appendChild(document.createTextNode("done"));
          return;
        }
        var seconds = (endTime - now) / 1000;
        document.body.appendChild(document.createTextNode("seconds left: " + seconds));
        document.body.appendChild(document.createElement("br"));
        now = new Date().getTime();
      },
      numTimes: Number.POSITIVE_INFINITY,
      args: [TimeoutChainer.SELF]
    });
    Code:
    (function() {
      if(now >= endTime) {
        document.body.appendChild(document.createTextNode("done"));
        clearInterval(arguments.callee.interval);
        return;
      }
      var seconds = (endTime - now) / 1000;
      document.body.appendChild(document.createTextNode("seconds left: " + seconds));
      document.body.appendChild(document.createElement("br"));
      now = new Date().getTime();
      if(!arguments.callee.interval)
        arguments.callee.interval = setInterval(arguments.callee, 0);
    })();
    Code:
    (function() {
      if(now >= endTime) {
        document.body.appendChild(document.createTextNode("done"));
        return;
      }
      var seconds = (endTime - now) / 1000;
      document.body.appendChild(document.createTextNode("seconds left: " + seconds));
      document.body.appendChild(document.createElement("br"));
      now = new Date().getTime();
      setTimeout(arguments.callee, 0);
    })();
    Trinithis

  • #5
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    	if(!arguments.callee.interval) {
    	    arguments.callee.interval = setInterval(arguments.callee, 0);
    	}

    In your 2nd example where you exemplify the setInterval() method, I dont see any proof within the code that it will loop, except that above line of code. Could you explain how it works in making it loop, what callee is, and that syntax?? I looked the function up on msdn and could not find any further explanation of this syntax. So please explain or point me in the right direction.

    Thank you.

    P.S. I did in fact run the code, and yes it does loop, how it does it though is what I want to know.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    arguments.callee is a reference to the function itself.

    So . . .
    Code:
    function abc() {
      alert(abc.toString());
      alert(arguments.callee.toString());
    }
    
    abc();
    ------------------------------

    Functions are objects. In Javascript, you can add properties to objects at runtime.

    Code:
    if(!arguments.callee.interval)
      arguments.callee.interval = setInterval(arguments.callee, 1);
    Does the running function have a property called interval? If it doesn't, then set-up an interval. setInterval wants a function reference and an interval time. So we send it a reference to the current function via arguments.callee. Because the function has no name, this is the only way to do it.
    Last edited by Trinithis; 12-15-2007 at 08:16 AM.
    Trinithis


  •  

    Posting Permissions

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