一个菜单的优化经历

最近的项目在多次修修改改之后遗留下了一个悲剧的一二级菜单,html结构混乱不说,还用了N多全局变量,N多脚本去制作切换的效果。所以决定着手重构之。 首先考虑是最激进的方法。只用CSS实现,具体的实现看这里 重构后的效果 -> 这里 除了hover的时候反应速度很快以外也没啥问题了。 后来收到一个feedback menu_bug 用户从“Bug”按钮移动到“Search bug”的时候,会触发到“报表”的hover效果,以至于难以点到“Search bug”的按钮。 (这里可以体验一下) 第一时间想到的是延迟hover的效果,查了一下相关资料未果,于是写下代码(用到了Jquery):

function navSwitcher(){ var topNav = $(“#navigation li.menu”); topNav.hover( function(){ var item = $(this); setTimeout(function(){item.addClass(‘menu_hover’);},300); }, function(){ var item = $(this); setTimeout(function(){item.removeClass(‘menu_hover’)}, 300); } ); }

想法是用setTimeout延迟一下hover的效果,测试时候又发现了个问题,如果从一个按钮快速移动另外一个按钮再移回原来的二级菜单,会触发一个死循环。。 如果每次mousehover与mouseover的的时候clearTimeout一下应该可以解决问题了,于是修改了一下代码,顺便调整了timeout时间优化使用体验,完整的Demo可以到这里查看 代码如下:

function navSwitcher(){ var topNav = $(“#navigation li.menu”); topNav.hover( function(){ var item = $(this); clearTimeout(item.data(‘timeout’)); var t = setTimeout(function(){ item.addClass(‘menu_hover’); },100); item.data(‘timeout’, t); }, function(){ var item = $(this); clearTimeout(item.data(‘timeout’)); var t = setTimeout(function(){ item.removeClass(‘menu_hover’) }, 200); item.data(‘timeout’, t); } ); }

嗯。。代码有点丑陋。。不过当我尝试把他封装一下时候发现会额外消耗5ms左右的时间。。于是还是这样好了, 在我的机器上FF3的测试结果: script_time 尚在可以接受的范围:D 于是此次优化工作暂告一段落。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!