CODEWITHSUNDEEP
angularjs
Alan2
Alan2

Reputation: 24562

How can I cancel the action of a delayed mouseLeave action if there's a subsequent mouseEnter?

I have a grid and each row of the grid has an attached mouseOver and a mouseLeave. When a user hovers over a row the current row's contents (exam) are copied to another location es.view and then this will appear below the grid. When the cursor is no longer over the grid row then the es.view is nulled.

Here's the code:

    $scope.mouseLeave = () => {
        es.view = null;
    }

    $scope.mouseOver = (exam) => {
        es.view = exam;
    }

Is there a way that if a user hovers over a row and then moves outside of that row (but not into another row) that I could delay the nulling of es.view for 5 seconds. But then as if the user hovers over another row within the 5 seconds the nulling could be cancelled and it would immediately show that new rows data?

Upvotes: 0

Views: 105

Answers (1)

DRobinson
DRobinson

Reputation: 4471

You would generally want to use $timeout for something like this, such that you don't actually null out the view until your grace period has ended. This provides time to cancel the change.

Using your 5-second suggestion, a sample modification of your example, may look along the lines of:

var leavingTimeout = null;
function cancelLastLeave(){
    $timeout.cancel(leavingTimeout); 
}
$scope.mouseLeave = () => {
    cancelLastLeave();
    leavingTimeout = $timeout(function(){
        es.view = null;
    }, 5000);
}

$scope.mouseOver = (exam) => {
    cancelLastLeave();
    es.view = exam;
}

Upvotes: 1

Related Questions