javascript - 使用 ngMouseover 去抖动

Question

我有这个 HTML div，它使用 ngMouseover 指令通过函数从 api 获取一些数据，如下所示:

标记:

<div ng-mouseover="getData()">
</div> 

Controller :

$scope.getData = function() {
    //get data from api
}

有什么方法可以为 ngMouseover 指令添加延迟，使其仅在光标在 div 上停留几秒钟后触发？就像 ngModelOptions 中的 debounce 一样。

Answer 1

您可以结合使用 onmouseenter 和 onmouseleave:如果鼠标进入元素至少 2 秒没有离开，则进行评估。

<div debounce-mouseover="getData()" stay-at-least="2"></div>

指令 debounceMouseover 是:

template: "<div ng-mouseenter="onEnter()" ng-mouseleave="onLeave()">",

link: function(scope, elem, attrs) {
  var stayAtLeast = attrs.stayAtLeast;
  var timer;

  scope.onEnter = function() {
    timer = $timeout(function() {
      scope.$eval(attrs.debounceMouseover);
    }, stayAtLeast);
  };

  scope.onLeave = function() {
    $timeout.cancel(timer);
  };
}

(这是一般的想法，实际的实现留给你，如果你需要帮助让我知道)