Question

I’m making a menu with a lot of functionality. I have to implement it towards other developers system, so I haven’t been able to successfully make a jsfiddle for it. However, what happens is that if I leave it for a few minutes on the page, and go back to activate it, the browser will freeze for a second or more, perhaps even causing a “This script is causing the page to freeze etc.”.

I think it’s related to my timers. So I was hoping someone could take a look at the functions that run with timers, as my other functions are triggered by mouseevents, and see if they make sense. I know there’s a lot of code, but if you specifically look for the timers I think someone with more experience than me can get the jist of it. I’m gonna have to buckle down and see if I get a fiddle to work if not.

The button that triggers the delay itself is the ul.downArrow inside the second timer in the code.

/* Check if submenu should be closed */
var timer;
$jq('#subNavigationContainer').hover(
    function(){
        clearTimeout(timer);
    },
    function(){
        var checkNavVariation = $jq('#subNavigationContainer').hasClass('small');
        timer=setTimeout(function () {
            if(checkNavVariation == false){
                $jq('#subNavigationContainer').animate({
                    height: ['50px', 'easeOutSine']
                }, 600, 'linear');
                var testLevel = $jq('#navigationContainer ul li.pathed').size();
                $jq('#subNavigationContainer ul,#subNavigationContainer #subMenuDescription').fadeOut('fast');  
                setTimeout(function () {
                    /* Indicate we want breadcrumb to open */
                    $jq('#subNavigationContainer').addClass('isClosed');        
                    if(testLevel < 1) {
                        $jq('#navigationContainer ul li').removeClass('selected');      
                    }
                    $jq('#navigationContainer ul li').children('.selArrow').remove();   
                }, 600);
            }
        }, 1500);
    }
);

setTimeout(function(){
    $jq('ul.downArrow').click(function() {
        loadMenu();
    }); 
    setTimeout(arguments.callee,1200);
},1200)

/* Automatic check for breadcrumb */
var counter = 0;
setTimeout(function(counter){       
    var subNavVisible = $jq('#subNavigationContainer').css('display');
    var subNavClosed = $jq('#subNavigationContainer').hasClass('isClosed');

    if(subNavClosed == true) {
        if(counter == 0) {
            $jq('#subNavWrapper ul').remove();
            $jq('#subNavWrapper div.subMenuDescription').remove();  
        } else {
            $jq('#subNavWrapper ul.downArrow').remove();
            $jq('#subNavWrapper div.subMenuDescription').remove();  
            $jq('#subNavWrapper ul.levelTwo').remove();     
            $jq('#subNavWrapper ul.levelThree').remove();   
            $jq('#subNavWrapper ul.levelFour').remove();            

        }
        $jq('#subMenuDescription').remove();
        $jq('#navigationContainer ul.levelOne').children('li.pathed').each(function() {
            /* Mark the top menu */
            $jq(this).siblings('li').removeClass('hover').removeClass('selected');
            $jq(this).siblings('li').children('.selArrow').remove();
            $jq(this).addClass('selected').addClass('hover');
            var liWidth = $jq(this).width();
            liWidth = (liWidth / 2) - 15;
            $jq(this).append('<div class="selArrow" style="margin-left: '+liWidth+'px"></div>');
            var highestHeight = 50;
            $jq(this).children('ul').clone().appendTo('#subNavWrapper').addClass('cloned');             
            $jq(this).children('ul').children('li.selected').children('ul').clone().appendTo('#subNavWrapper').addClass('cloned');
            $jq(this).children('ul').children('li.selected').children('ul').children('li.selected').children('ul').clone().appendTo('#subNavWrapper').addClass('cloned');
            var hasLevel = $jq('#subNavWrapper ul.levelThree li.pathed').size();

            $jq('#subNavWrapper ul').css('display','none');
            /* Check for grey submenu area visible or not */
            var subNavVisible = $jq('#subNavigationContainer').css('display');
            if(subNavVisible != "block") {
                $jq('#subNavigationContainer').css('height','0px');
                $jq('#subNavigationContainer').css('display','block');
                $jq('#subNavigationContainer').addClass('small');
                $jq('#subNavigationContainer').animate({
                    height: [highestHeight+'px', 'easeOutSine']
                  }, 300, 'linear');
            } else if(subNavVisible == "block") {
                $jq('#subNavigationContainer').animate({
                    height: [highestHeight+'px', 'easeOutSine']
                  }, 300, 'linear');
            }
            $jq('#subNavWrapper ul').css('height','2px').css('width','200px').css('display','block');
            $jq('#subNavWrapper ul li').css('display','none');
            $jq('#subNavWrapper ul li.pathed').addClass('breadcrumb');
            $jq('#subNavWrapper ul li.pathed').fadeIn('fast');
            $jq('#subNavWrapper ul li.pathed:last').parent('ul').after('<ul class="downArrow"><li><img src="http://dev.ghostwriter.no/demo/altibox/images/arrow-down.gif" alt="Ekspander" /><span>Utvid meny</span></li></ul>');
            $jq('#subNavWrapper ul').animate({
                height: ['21px', 'easeOutSine']
            }, 100, 'linear');
            counter++;
            $jq('#subNavigationContainer').removeClass('isClosed');
        });
    } else if(subNavClosed == false) {

    }
    setTimeout(arguments.callee,750) 
},750)

Answer 1

there are timers checking if the menu
is open, if not it will open a
breadcrumb like area

It’s better to handle a moment when menu is closing and trigger showing your breadcrumb like area. No timeouts required.

there’s a timer checking for a click on an arrow in the breadcrumb, that will open the menu again

Just handle click on an arrow in the breadcrumb and open menu in handler! No timeouts required here.