Question

我有一个网格，网格的每一行都有一个附加的mouseOver和一个mouseLeave。当用户将鼠标悬停在一行上时，当前行的内容（检查）将被复制到另一个位置es.view，然后这将显示在网格下方。当光标不再位于网格行上时，es.view将被清零。

以下是代码：

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

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

是否有一种方法，如果用户将鼠标悬停在一行上然后移动到该行之外（但不会移动到另一行），我可以将es.view的归零延迟5秒。但是，如果用户在5秒内悬停在另一行上，则可以取消归零并立即显示新行数据？

Answer 1

您通常希望将$timeout用于此类内容，这样在宽限期结束之前，您实际上不会使视图无效。这提供了取消更改的时间。

使用您的5秒建议，对您的示例进行示例修改，可能会看起来如下：

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;
}

如果有后续的mouseEnter，如何取消延迟mouseLeave操作？

1 个答案: