javascript - 具有一个数据绑定(bind)的 Angular 应用程序运行缓慢

Question

这里是 Angular 新手。

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

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

基本上，我有一个带有文本字段和提交按钮的不可见表单。 Jquery 使文本输入保持焦点，当用户键入某些输入时，Angular 会将其绑定(bind)到格式化的 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 的教程中都错过了它 - 不要在 Controller 内修改 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>

我没有看到您所指的延迟，但这将是一个开始确定什么(如果有的话)延迟以及如何修复它的好地方。

这是你的 fork fiddle