setTimeout and do...while aren't working out.

Page 1 of 1

8 Replies - 1342 Views - Last Post: 16 January 2012 - 01:51 AM

#1 SittingonDucks  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 23-December 11

setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:13 PM

The webpage freezes and Google Chrome returns an "Aw, Snap" page. Any ideas? :|

title-ref.js
 
var x=0; 
var gh=true; 
function changeTitle()
{ 
	x++; 
	switch(x)
	{ 
		case 1: 
			document.title="Studio Notex :)/>"; 
			break; 
		case 2: 
			document.title="Studio Notex ;)/>"; 
			break; 
		case 3: 
			document.title="Studio Notex :3"; 
			break; 
		case 4: 
			document.title="Studio Notex :D/>"; 
			break; 
		case 5: 
			document.title="Studio Notex >:3"; 
			gh=false; 
			break; 
		default: 
			document.title="Studio Notex :)/>"; 
			break; 
	} 
} 
do
{ 
	setTimeout("changeTitle();", 1000); 
} 
while (x < 6 && gh);


index.php 
 
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<title> Studio Notex :)/> </title> 
		<meta http-equiv="Content-Type"
			content="text/html; charset:utf-8" /> 
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
		<script type="text/javascript" src="title-ref.js"></script> 
	</head> 
	<body> 
		<h1> Hope this works... </h1> 
		<p> Loading.. </p> 
	</body> 
</html>


It works without the two script references in <head>.

Is This A Good Question/Topic? 0
  • +

Replies To: setTimeout and do...while aren't working out.

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:25 PM

I would stab a guess at the use of globals. besides that, the code can not do what you intend. you probably mean to switch the title every second, but that is not what you achieve this way. the while() loop does not wait for one second but assigns all timeouts as fast as possible (setTimeout() only relays the function’s execution, not the script itself).
therefore you have at least one second no change of x and you run quite a lot of loops (millions, probably), which result in quite a lot of functions to execute after one second. you might run out of memory executing that many functions.


rules of thumb:
- globals are bad
- read what the functions do (in your favourite JS reference)

This post has been edited by Dormilich: 15 January 2012 - 01:29 PM

Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:28 PM

The setTimeout function is asynchronous; it doesn't execute the callback command right away, but returns immediately after setting it up to be executed after the given delay.

So when you put a setTimeout call into a loop, where the loop conditions are changed by the callback of the timeout, you are in effect creating an infinite loop. - Or more accurately: a loop that sets a new timeout repeatedly, as many times as it possibly can before the callbacks of the first timeouts change the conditions. But at that point you've set so many timeouts that the page will likely become unresponsive and cause the browser to take action to stop it or crash.
Was This Post Helpful? 0
  • +
  • -

#4 SittingonDucks  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 23-December 11

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:34 PM

Hey Dormlich, you're awesome. Thanks for the quick reply.

But I'm kind of a newb to Javascript.
So first off, isn't defining a variable outside of any function/object considered a 'global variable'?
Second, how can I fix it? Should I try using jQuery and using the .delay() method?

Thanks. :D

View PostAtli, on 15 January 2012 - 01:28 PM, said:

The setTimeout function is asynchronous; it doesn't execute the callback command right away, but returns immediately after setting it up to be executed after the given delay.


So could you give me a more efficient way of doing things and still get the same result? Thanks. :)

EDIT: * the desired result, not the same result.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:38 PM

View PostSittingonDucks, on 15 January 2012 - 09:30 PM, said:

So first off, isn't defining a variable outside of any function/object considered a 'global variable'?

nope. global variables are the variables that have the scope of the global object (in this case window)

View PostSittingonDucks, on 15 January 2012 - 09:30 PM, said:

Second, how can I fix it? Should I try using jQuery and using the .delay() method?

if you use jQuery.delay() you pause the current queue (see jQuery - delay() for an example).

but before you dive into jQuery, learn to understand Javascript better. jQuery is often a mystery if you don’t know what Javascript does (because jQuery is Javascript).

what you could do is make the function recursive, i.e. it calls the next step after the function has completed.

ex.
// though an "infinite loop" as well, 
// but to demonstrate the principle
function show(x)
{
    alert(x++);
    window.setTimeout(show, 1000, x);
}

This post has been edited by Dormilich: 15 January 2012 - 01:40 PM

Was This Post Helpful? 1
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:47 PM

You can also use setInterval and clearInterval functions for this type of counter. They will allow you to repeat a function every so often until you stop it. For example:
var count = 0;
var counterID = setInterval(function() {
    console.log("Count: " + (++count));
    if (count == 6) {
        clearInterval(counterID);
    }
}, 1000);



Also, It's simple to avoid polluting the global scope. Just wrap your code into a self executing function, and it'll be in a scope of it's own:
(function() {
    var count = 0;
    var counterID = setInterval(function() {
        console.log("Count: " + (++count));
        if (count == 6) {
            clearInterval(counterID);
        }
    }, 1000);
})();

Just remember to use var when defining variables, or they'll be automatically placed into the global scope.
Was This Post Helpful? 1
  • +
  • -

#7 SittingonDucks  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 23-December 11

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:48 PM

mind = blown

So this is my new code. It takes a while to load but it does after a while, and the title doesn't change at all. 

 

var x=0; 
var gh=true; 
function changeTitle()
{ 
	x++; 
	setTimeout("changeTitle();", 1000); 
	switch(x)
	{ 
		case 1: 
			document.title="Studio Notex :)/>"; 
			break; 
		case 2: 
			document.title="Studio Notex ;)/>"; 
			break; 
		case 3: 
			document.title="Studio Notex :3"; 
			break; 
		case 4: 
			document.title="Studio Notex :D/>"; 
			break; 
		case 5: 
			document.title="Studio Notex >:3"; 
			gh=false; 
			break; 
		default: 
			document.title="Studio Notex :)/>"; 
			break; 
	} 
}

Was This Post Helpful? 0
  • +
  • -

#8 SittingonDucks  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 23-December 11

Re: setTimeout and do...while aren't working out.

Posted 15 January 2012 - 01:56 PM

Nevermind I got it working. I love you Atli. :D
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: setTimeout and do...while aren't working out.

Posted 16 January 2012 - 01:51 AM

out of curiousity (untested)
var newtitle = {
    data: [":)/>", ";)/>", ":3", ":D/>", ">:3", ":)/>"],
    title: "Studio Notex",
    delay: 1000,
    change: function () {
        if (newtitle.tempData.length > 0) {
            document.title = newtitle.title + " " + newtitle.tempData.shift();
            window.setTimeout(newtitle.change, newtitle.delay);
        }
    },
    start: function() {
        newtitle.tempData = newtitle.data.concat(); // copy array
        window.setTimeout(newtitle.change, newtitle.delay);
    }
}


var newtitle = {
    data: [":)/>", ";)/>", ":3", ":D/>", ">:3", ":)/>"],
    title: "Studio Notex",
    change: function () {
        document.title = newtitle.title + " " + newtitle.tempData.shift();
        if (0 === newtitle.tempData.length > 0) {
            window.clearInterval(newtitle.id);
        }
    },
    start: function(delay) {
        if (isNaN(delay)) {
            delay = 1000;
        }
        newtitle.tempData = newtitle.data.concat(); // copy array
        newtitle.id = window.setInterval(newtitle.change, delay);
    }
}

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1