How to get my submenus to disppear after a certain period using javascript?

Question

I want to set time for my submenus to disppear after a certain period using javascript..my code is:

function buildsubmenus(){
    for (var i=0; i<menuids.length; i++){
        var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

        for (var t=0; t<ultags.length; t++){
            ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"

            if (ultags[t].parentNode.parentNode.id==menuids[i]) 
                //if this is a first level submenu
                //dynamically position first level submenus to be width of main menu item
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
 else 
                //else if this is a sub level submenu (ul)
                //position menu to the right of menu item that activated it
     ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" 

            ultags[t].parentNode.onmouseover=function(){
                this.getElementsByTagName("ul")[0].style.display="block"
                if(this.getElementsByTagName("a").length  == '1'){
                    this.getElementsByTagName("ul")[0].style.display="none"   
                }
            }

function wait(){
    setTimeout('times()', 5000)
}

ultags[t].parentNode.onmouseout=function times(){
    this.getElementsByTagName("ul")[0].style.display="none"
}
}
 for (var t= ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
 ultags[t].style.visibility="visible"
 ultags[t].style.display="none"
 }

} }

and my function that i want to display after a certain time is times(), but whenever i do onmouse it calls it directly and it doesn's wait for the time to count.

Answer 1

Actually, your problem is that you are not referencing the correct function in your call to setTimeout. In other words, the call to the function in the setTimeout parameter is executed in the context of the window object, whereas your times() function is defined in the context of your buildSubmenus object (you may not have realized this but defining you wait() function and your times() function inside of the body of buildSubmenus means that the wait() and times() functions are only defined and valid inside local scope of the buildSubmenus function)

I was going to try to correct the code in your sample code but there are too many issues and with the rest of the context missing I think it would be best if I would just point you in the right direction. You need to learn and understand the concepts of closures and currying before you go about correctly implementing the code that you posted in the question.

Also, if you don't feel inclined to understanding the inner-workings of why your example doesn't work, I would suggest you take a look at a javascript framework that can handle all that for you such as Prototype.js or jquery.

Answer 2

The thing is, you told to call time onmouseout!

ultags[t].parentNode.onmouseout=function times(){
    this.getElementsByTagName("ul")[0].style.display="none"
}

You should have done

var waitToDelete = function(){
    setTimeout(deleteList, 5000);
}

ultags[t].parentNode.onmouseout= waitToDelete;

function deleteList()
{
   document.getElementById("Your Menu ID").getElementsByTagName("ul")[0].style.display="none";
}