setTimeout() in javascript

[David101]

sooo..i'm pretty new at programming in general and i decided to make a site to learn a bit about css/java/asp which im hosting on my router (lol).

anyways...i'm making a "view code" object, which is a link that expands a box and grabs data from txt files on my server using xmlhttprequest and show it in my formatted code box. this works fine, but i'm trying to make it fancy and have a "Loading..." text with a nice animation for like 500 msecs using setTimeout AND IT'S DRIVING ME NUTS!!! I apparently don't understand all the stuff on the internet explaining this. i've tried dozens of iterations of my code but none seem to work. could someone point out where I'm going wrong? Kinda frustrating :/

thanks,

david


here are the functions:

function toggle(txt) {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    	ele.style.display = "none";
		text.innerHTML = "view";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
		setTimeout(getData(txt), 500);
	}
} 
function getData(txt) {
		var req = null;
		if(window.XMLHttpRequest)
			req = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			req  = new ActiveXObject(Microsoft.XMLHTTP); 
		req.onreadystatechange = function()
		{ 
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.getElementById("getCode").innerHTML="<code>" + req.responseText + "</code>";
				}	
			} 
		}
		req.open("GET", txt, true);
		req.send(null);		
}

and the code used to trigger it:

<a id="displayText" href="javascript:toggle('data.txt');">view</a>
		<div id="toggleText" style="display: none">			
			<p>
			<div id="getCode"><code><img src="1-1.gif"/> Loading...</code></div>		
			</p>	
		</div>

 

[sourceninja]

I'm confused, you want to delay the actual ajax call 500ms so a loading icon can be displayed? Wouldn't it be better to put the loading icon in the function that does the ajax call so it appears before the ajax is running and disappears when the ajax is complete?

Honestly, I don't write pure javascript anymore. I use jquery where this is made a lot simpler. It could be done as easy as.

$("#loading").ajaxStart(function(){
   $(this).show();
 });
$("#loading").ajaxStop(function(){
   $(this).hide();
 });

$('#displayText').click(function() {
    $('#getCode').load('data.txt');
});

(this was sudo code and not checked for 100% accuracy)

 

[PhatoseAlpha]

Try this.

var Interval;
var CurrentAnimationStage = 0;
var LoadMessage = document.getElementById("LoadMessage");
var LoadWheel = [".", "..", "...", "...."];
function toggle(txt) {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "view";
      }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
		getData(txt);
		setInterval(Animate(), 100);
    }
}

function Animate(){
	CurrentAnimationStage += 1;
	if (CurrentAnimationStage > 3)
		{
		CurrentAnimationStage = 0;
		}
	LoadWheel.innerHTML = "Loading" + LoadWheel[CurrentAnimationStage];
}

function getData(txt) {
        var req = null;
        if(window.XMLHttpRequest)
            req = new XMLHttpRequest(); 
        else if (window.ActiveXObject)
            req  = new ActiveXObject(Microsoft.XMLHTTP); 
        req.onreadystatechange = function()
        { 
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
					document.clearInterval(Interval);
                    document.getElementById("getCode").innerHTML="<code>" + req.responseText + "</code>";
                }
				else
				{
					document.clearInterval(Interval);
					document.getElementById("getCode").innerHTML = "There was an error with this request.";
				}
            } 
        }
        req.open("GET", txt, true);
        req.send(null);        
}

with HTML

<a id="displayText" href="javascript:toggle('data.txt');">view</a>
        <div id="toggleText" style="display: none">            
            <p>
            <div id="getCode"><code><img src="1-1.gif"/><span id='LoadMessage'>Loading...</span></code></div>        
            </p>    
        </div>

Reasoning: If an animation is what you're after, intervals are appropriate - timeouts are for once and done delays, not repeating occurrences. The click starts the animation (the Animate function is called every 100 milliseconds until cleared, which causes the animation). The AJAX request is made immediately, and when it is finished loading, it ends the interval and shows the text.

The variables are for the animation. In my experience, getElementById takes up enough time that if you're going to be using an element often, it should be cached.

 

[David101]

hi guys,

first, thanks for the replies. i'll prob stick with javascript for now instead of jquery since i wanna learn what's behind it before i go the easier route. also thanksfor that animation script, i'm using it now .

however, it turns out that i didn't explain myself properly, but i managed to figure it out . what i meant was that the loading time is instant, since the data i'm getting will alwaysbe <10kb and its hosted locally, so i just wanted a "fake" delay with the loading animation.

the way i fixed my code (had a hunch but didn't know the syntax, etc.) was executing my setTimeout like so

setTimeout(function(){getData(txt)},1000);

since i had to pass an argument it always executed the function first since i had to include the (). i found this little piece of gold here if anyone is interested.

thanks again,

david

p.s. there were a few things i had to change in the animation script to get it working