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>