Should I remove an Angular watch?

Question

I am developing a search engine inside an angular view, and I was wondering if the search engine is used too many times and the user does not leave the search engine, what should I do to avoid the overload problem?

When I execute a lot of queries, I can notice that the presentation is slower. I think this problem is caused by area overload, but I'm not sure.

Example: If I get the query results in $scope.variable1and after I make another query again and rewrite $scope.variable1... what will happen? are the data structure observers inside the old variable1deleted automatically?

In general, sometimes when I use angular too many times, but without leaving it, the slowdown slows down. Which one is best to handle this?

Answer 1

Anytime a region variable changes, a digest cycle begins, which means that all observers are checked to see if something has changed. (actually 2 times for dirty checking). In the search field, you should strangle how many times you update the scope variable, otherwise the digest cycle will hit too hard. you can do it with bounce

<input type="text" name="variable1"
             ng-model="variable1"
             ng-model-options="{ debounce: 1000 }" />

Also, make sure that you do not create a new observer when changing the $ scope.variable1 variable. declare an observer once in your controller

Anytime:

{{variable}}

. , 2000 , , , .

, :

(function () { 
    var root = angular.element(document.getElementsByTagName('body'));

    var watchers = [];

    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };

    f(root);

    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });

    console.log(watchersWithoutDuplicates.length);
})();

, :

{{::variable}}

. - , .

, , , , . :

,

,