Question

我有，在我的页面上的列表中列出了许多单独的项目（或瓷砖）。如果用户在列表中的项目上拖动文件，我会有条件地在onDragEnter中添加高亮类，并删除onDragLeave中的类。高亮类基本上改变了项目的背景颜色。

在不使用$ scope。$ apply的情况下，突出显示需要一秒左右才能在UI中反映出来，所以我将重点放在$ scope中。$ apply。

现在，当我在项目之间快速移动文件时，由于大量的摘要周期，性能变得非常慢（突出显示和非突出显示变得非常慢）。关于如何改进性能但同时在UI中很快反映出更改的任何想法。

我尝试使用$ scope。$ digest（）而不是$ scope。$ apply但没有注意到性能有任何改善。

我的代码是：

function onDragEnter() {
    $scope.$apply(function() {
        $scope.highlight = true; // this controls if the highlight class is added to the item using ng-class
    });
}

function onDragLeave() {
    $scope.$apply(function() {
        $scope.highlight = false;
    });
}

Answer 1

如果这可以帮助某人，使用$ scope。$ evalAsync有助于显着提高性能。

function onDragEnter() {
    $scope.$evalAsync(function($scope) {
        $scope.highlight = true; // this controls if the highlight class is added to the item using ng-class
    });
}

function onDragLeave() {
    $scope.$evalAsync(function($scope) {
        $scope.highlight = false;
    });
}

拖放时的角度性能：各种目标和突出显示

1 个答案: