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

【问题标题】：Angular performance when drag drop : various targets and highlighting拖放时的角度性能：各种目标和突出显示
【发布时间】：2016-11-22 07:50:45
【问题描述】：

我有，在我的页面上的列表中列出了许多单独的项目（或图块）。如果用户将文件拖到列表中的某个项目上，我有条件地在 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;
    });
}

【问题讨论】：

标签： angularjs drag-and-drop

【解决方案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;
    });
}

【讨论】：