Question

Angular新手在这里。

这可能是一个愚蠢/琐碎的问题，但我真的想学习Angular，尽管我觉得我可以更快地手工编写这些东西。我有这个试图模仿旧计算机控制台的应用程序。用户可以键入他想要的任何内容，当他按下Enter时，命令显示在上面，并且可能执行某些操作，具体取决于给定的命令。基本命令提示符类型外观。

这是JSFiddle。请原谅CSS问题;我无法让一切看起来都正确。

基本上，我有一个带有文本字段和提交按钮的隐形表单。 Jquery使文本输入保持焦点，当用户键入一些输入时，Angular将其绑定到格式化的DOM元素。问题是输入字段在显示输入时缓慢，这反过来导致在屏幕上显示延迟。当我删除Angular代码时，文本输入是快速响应的。任何帮助，将不胜感激。这是导致减速的代码。我找不到任何特别的错误。

angular.module("kendall").controller("ConsoleController", ['$scope', '$interval', '$timeout', function($scope, $interval, $timeout) {

// Add new command to list.
$scope.pushCommand = function($command) {
    if(!$command) {
        $command = 'ERROR! NO INPUT...';
    }

    $('#current-input').before('<p class="command">' + $command + '</p>');      
    $scope.text = '';

    $('#new-command').focus();
};

//////////////////////////
/////  MAIN  SCRIPT  /////
//////////////////////////
$scope.commands = [];
$scope.timer = null;
$scope.periodDelay = 5; // Number of 'typeDelay' cycles to wait after period is submitted.
$scope.typeCounter = $scope.pause = 0;

$scope.begin = new Date();
}]);

HTML -

    <div class="monitor-inner">
        <div class="monitor-screen col-xs-10 col-xs-offset-1">          
            <div class="col-xs-12 bevelled"></div>
            <div class="col-xs-12 lined"></div>
            <div class="content-bubble col-xs-12" ng-controller="ConsoleController as console">
                <form ng-submit="pushCommand(text)">
                    <input type="text" id="new-command" ng-model="text" />
                    <input type="submit" />
                </form>
                <p id="current-input">{{ text }}<span class="block"></span></p>
                <div class="display-row">
                    <button>About Me</button>
                    <button>Website</button>
                    <button>Top Secret</button>
                </div>
                <div class="touch-row">
                    <button>About Me</button>
                    <button>Website</button>
                    <button>Top Secret</button>
                </div>
            </div>
        </div>
    </div>

感谢您的帮助！

Answer 1

首先 - 如果您在几乎每个关于Angular的教程中都错过了它 - 请勿在控制器中修改DOM！这将使您免除很多麻烦，并将您置于正确使用Angular的正确道路上。 Angular使用与典型的jQuery构建的应用程序不同的范例（MVVM）。

所以，你的pushCommand可能就是：

$scope.pushCommand = function () {
    var cmdText = $scope.text;
    if (!cmdText) {
        cmdText = 'ERROR! NO INPUT...';
    }

    $scope.text = '';       
    $scope.commands.push(cmdText);
};

和你的HTML（注意ng-repeat）：

<form ng-submit="pushCommand()">
    <input type="text" id="new-command" ng-model="text" />
    <input type="submit" />
</form>
<p class="command" ng-repeat="cmd in commands track by $index">{{cmd}}</p>
<p id="current-input">{{ text }}<span class="block"></span>

我没有看到你所指的滞后，但这将是一个开始识别什么，如果有什么，是滞后以及如何解决它的好地方。

这是您的分叉fiddle

Answer 2

你最大的滞后主要是不得不经常重绘东西。如果您使用Chome devtools时间轴功能，您将看到运行脚本花费的时间相对较少，大多数花费在绘画上，这需要很长时间，因为它会重新绘制整个文档。

因此，加快工作速度的主要技巧是尝试找出如何消除一些冗余重绘。

最小化AngularJS导致的任何迟缓的一件小事是使用输入上的ng-model-options attribute来设置去抖动延迟。这是因为否则，只要按下某个键，AngularJS就会为应用程序运行整个作用域树的完整$ digest（）循环。从理论上讲，不应该花很长时间才能完成这么多有角度的事情，但它可能比你想要的更加严厉。然而，当我自己添加这个时，仍然有一个快速打字并看到角色出现的延迟，但它没有没有它那么糟糕。（我使用10 ms的去抖值，但是自己试验一下）。

一个数据绑定运行缓慢的Angular应用程序

2 个答案: