Debounce with ngMouseover

Question

I have this HTML div that uses a directive ngMouseoverto get some data from api through a function as follows:

Markup:

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

Controller:

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

Is it possible to add a delay to the directive ngMouseoverso that it only starts after the cursor remains for a few seconds on the div? The same as with debouncec ngModelOptions.

Answer 1

You can use a combination of onmouseenterand onmouseleave: if the mouse enters the element and does not go away for at least 2 seconds, then rate it.

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

And the directive 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);
  };
}

( , , , )