setTimeout() recursion problem

[si4]

Hello,

I'm currently studying javascript by myself.
I thought that I will write js that will remove element in the body from DOM every 2 seconds, untill all elements in the body are deleted( except debug <span> :) )

At first I tried to go through the elements with loop, but when I call setTimeout() the loop doesn't wait setTimeout() to end, but it continues looping.

Now I use recursion. setTimeout() call the function which do the stuff.

But when there is more nested tag( as in the sample html below <ul><li></li</ul> ) inner recursive function( cDestoyer() at the middle of the function body ) stops for some reason.
And whole ul is deleted, not element by element.

When I don't use setTimeout(), recursion is working correctly.

Any help will be appreciated.

Here is the example: http://www.svubit.eu/iskren/

[jx2]

i am surprice it works at all!!
your.js file is one line and there are coments in it !! so its meen part of the code is commented... isnt it?

could you post your code?

regards jx2

[si4]

May be there is problem with line breaks, because file is created with gnu/linux editor and some windows editors show it as one line.

This is the code in the js file:

function cDestroyer( node, it ){
    if( !node){ var node = document.body }
 
    var stuffToDestroy = node.childNodes;
 
    if( it ){ it = parseInt(it);}
    if( !it ) { it= stuffToDestroy.length - 1;}// we start from the end of the dom tree
    var target = stuffToDestroy[it];
 
    if( target ){// no " ... has no properties" error
        if( target.nodeType == 1)//we need to delete only elements
        {
            debug("--node=" +node.nodeName + "; target=" +target.nodeName+ "; it=" +it);
            if( target.hasChildNodes() ){// if the element has childs we need to delete them first
                debug("+++++++node(" +target.nodeName+ ") has childs");
                cDestroyer( target );
            }
            if( target.id != "debug" ){ node.removeChild(target);}
            debug("==End of " +target.nodeName+ " circle");
        }
    }
    it--;
    if( it > 0 ){
        //debug(">>End of a big loop");
        if( useSetTimeout == 1 ){
            setTimeout(function() { cDestroyer(node,it) }, destroyTimeout * 1000);
        }else{
            cDestroyer( node, it);
        }
    }
 
}
 
function debug( msg ){
    if( showDebug == 1 ){
        container = document.getElementById('debug');
        container.innerHTML = msg + "<br />\n"+ container.innerHTML;
    }
}
function setSettings( which, val ){
    if( which == "debug") {
        showDebug = val;
    }else {
        useSetTimeout = val;
    }
}
var destroyTimeout = 1;// in secs.
var showDebug = 1;
var useSetTimeout = 1;

[jx2]

first of all
setTimeout() doesnt stop the script(you know that allready)
it "reminds" your script that it have to do some code after some time

in your case you should concsider to use setInterval() insted that would make the job
e.g.
[html]<a href="javascript:self.setInterval("cDestroyer()", 2000)">destroy</a>[/html]
(and do not use settimeout() of course)

what did happen in your code:

function cDestroyer( node, it ){
    if( !node){ var node = document.body }
 
    var stuffToDestroy = node.childNodes;
 
    if( it ){ it = parseInt(it);}
    if( !it ) { it= stuffToDestroy.length - 1;}// we start from the end of the dom tree
    var target = stuffToDestroy[it];
 
    if( target ){// no " ... has no properties" error
        if( target.nodeType == 1)//we need to delete only elements
        {
            debug("--node=" +node.nodeName + "; target=" +target.nodeName+ "; it=" +it);
            if( target.hasChildNodes() ){// if the element has childs we need to delete them first
                debug("+++++++node(" +target.nodeName+ ") has childs");
//===================== here is where the trubles starts ============
//cDestroy will destroy "first child " yeah but after 1000 miliseconds
                cDestroyer( target );
//========================================================
            }
            if( target.id != "debug" ){ node.removeChild(target);}
            debug("==End of " +target.nodeName+ " circle");
        }
    }
    it--;
    if( it > 0 ){
        //debug(">>End of a big loop");
        if( useSetTimeout == 1 ){
 
//=========  thats where the first child will be destroyed next time   ======
//========= see coments above ==================
// ======== after 1000miliseconds but setTimeout() doesnt wait!!      ====
 
            setTimeout(function() { cDestroyer(node,it) }, 
 
 
 
destroyTimeout * 1000);
        }else{
//=================== but you do destroy parent here immeadietly after 
//=================== you used cdestroy ( child ); ==============
 
            cDestroyer( node, it);
 
// ===now it keep doing the job but cDestroy( yourChild ) is waiting   =====
//=== and after 1 second there is nothing to destroy because child 
//=== was destroyed toghether with parent
 
        }
    }
 
}
 
function debug( msg ){
    if( showDebug == 1 ){
        container = document.getElementById('debug');
        container.innerHTML = msg + "<br />\n"+ container.innerHTML;
    }
}
function setSettings( which, val ){
    if( which == "debug") {
        showDebug = val;
    }else {
        useSetTimeout = val;
    }
}
var destroyTimeout = 1;// in secs.
var showDebug = 1;
var useSetTimeout = 1;

i hope i made it clear

post again if you get into truble

regards
jx2

[si4]

OK. Thanks a lot for the help.

I've though to use setInterval(), but I wanted to understand why this brakes.

Thank you again for the explanation!