Question

我正在制作一个包含很多功能的菜单。我必须将它实现到其他开发人员系统，所以我无法成功地为它做一个jsfiddle。但是，如果我在页面上放置几分钟，然后返回激活它，浏览器将冻结一秒钟或更长时间，甚至可能导致“此脚本导致页面冻结等”。 ”。

我认为它与我的计时器有关。所以我希望有人可以看一下用定时器运行的函数，因为我的其他函数是由mouseevents触发的，看看它们是否有意义。我知道有很多代码，但是如果你专门寻找定时器，我认为比我更有经验的人可以得到它的主旨。如果不是的话，我将不得不扣下来，看看我是否能找到工作小提琴。

触发延迟的按钮本身就是代码中第二个计时器内的ul.downArrow。

/* 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

有计时器检查菜单是开放的，如果不是它会打开一个像区域一样的面包屑

最好处理片刻当菜单关闭时触发显示你的面包屑状区域。不需要超时。

有一个计时器检查点击符号中的箭头点击，这将再次打开菜单

只需处理点击导航栏中的箭头并在处理程序中打开菜单！这里不需要超时。

我认为我的javascript计时器导致浏览器冻结

1 个答案: