javascript - 防止鼠标悬停时元素被删除

Question

我的通知显示在屏幕的左上角。他们有 5 秒的延迟，然后被删除。如果用户将鼠标悬停在某个用户上，则该用户应该被删除。

这是我的 jquery 代码

$alert.on('mouseover', function() {
    clearTimeout(growl_remove);
});
growl_remove = setTimeout(function() {
    return $alert.alert("close");
}, 5000);

这是 HTML

<div class="growl col-xs-12 col-sm-12 col-md-3 alert alert-danger" style="position: fixed; margin: 0px; z-index: 9999; top: 26.846393585205078px; right: 20px;">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;Invalid Username or Passowrd
</div>

现在这似乎确实有效，但它阻止了最后一个警报被删除，而不是鼠标悬停在其上的警报。

这是一个jsFiddle:http://jsfiddle.net/KU5gy/

Answer 1

有帮助吗？

var AlertController = function(){
  var _timeoutId = null;
  var _resetTimeout = function() {
    clearTimeour(_timeoutId);
    _timeoutId = setTimeout(function() { $alert.alert("close"); }, 5000);
  }
  var _init(){
      $alert.on('mouseover', resetTimeout);
  }
  return {
      showNotification: function(){
        $alert.alert("show");
        _init();
      }
  }
}

并这样调用它:

//call it when your notification is to be shown
function onNotification(){
  new AlertController().showNotification();
}