Angular app with one data binding running sluggishly

Question

Angular newbie here.

This may be a dumb/trivial question, but I'm really trying to learn Angular, even though I feel like I could hand-code this stuff faster. I have this app that is trying to mimic an old computer console. The user can type in whatever he wants and when he presses Enter, the command is displayed above, and possibly some action is performed, depending on the command given. Basic command prompt-type look and feel.

Here is a JSFiddle. Please excuse the CSS issues; I couldn't quite get everything looking correctly.

Basically, I have an invisible form with a text field and submit button. Jquery keeps the text input in focus, and when the user types some input, Angular binds it to a formatted DOM element. The issue is that the input field is sluggish in displaying the input, which in turn causes a delay in being displayed on-screen. When I remove the Angular code, the text input is snappy and responsive. Any help would be appreciated. Here is the code that causes the slowdown. I can't find anything particularly wrong with it.

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>

Thanks for your help!

New Dev · Accepted Answer · 2014-12-03 01:38:24Z

First of all - in case you missed it in pretty much every tutorial about Angular - Do Not Modify DOM Within a Controller! This will spare you a lot of headaches and will place you on the right path of using Angular properly. Angular uses a different paradigm (MVVM) than typical jQuery-built apps.

So, your pushCommand could just be:

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

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

and your HTML (notice the 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>

I don't see the lag that you are referring to, but this would be a good place to start to identify what, if anything, is laggy and how to fix it.

Here's your forked fiddle

GregL · Accepted Answer · 2014-12-03 03:19:28Z

Your biggest lag is primarily to do with having to constantly repaint things. If you use the Chome devtools timeline feature, you will see that comparatively little time is spent running script, most is spent painting, which takes a long time, because it repaints the entire document.

So your major technique to speed things up is to try and figure out how to eliminate some of those redundant repaints.

One small thing you can do to minimise any sluggishness AngularJS is causing is to use the ng-model-options attribute on the input to set a debounce delay. This is because otherwise, AngularJS runs a full $digest() loop of the whole scope tree for the application any time a key is pressed. Theoretically, that shouldn't take long with so few angular things going on, but it can be more heavy-handed than you would like. However, when I added this myself, there was still a delay in typing fast and seeing the characters show up, but it wasn't quite as bad as without it. (I used a debounce value of 10 ms, but experiment with it yourself).

Collectives™ on Stack Overflow

Angular app with one data binding running sluggishly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related