3-4. Debounce
マウスがエリアを離れて500ms後に閉じる実装。
この処理を入れない場合、際どい位置にマウスが居るとメニューが荒ぶる。
app.dom.hover = function(ele, over, out, delay){
var timer;
ele.hover(function(){
if (timer) {
clearTimeout(timer);
timer = null;
} else {
over.apply(this, arguments);
}
}, function(){
var that = this,
args = $.makeArray(arguments);
timer = setTimeout(function(){
out.apply(that, args);
timer = null;
}, delay);
});
}
app.setup.menu = function(ele){
var ul = ele.find('> ul');
app.dom.hover(ele, function(){
ul.slideDown('fast');
}, function(){
ul.slideUp('fast');
}, 500);
}
<li
class="menu"
data-setup="menu"
>
<a class="menu profile-name" data-setup="profile"><img class="profile-icon"><span></span></a>
<ul class="menu-dropdown" style="display: none; ">
<li>
<a
data-setup="click"
data-click="resetup"
>Reload</a>
</li>
<li>
<a
data-setup="click"
data-click="show"
data-show-id="settings-window"
>Settings</a>
</li>
<li>
<a
data-setup="click"
data-click="show"
data-show-id="help-window"
>Help</a>
</li>
<li class="divider"></li>
<li><a href="/signout">Sign Out</a></li>
</ul>
</li>