Reduce the resource consumption of Angular JS real-time ajax requests

Question

Reduce the resource consumption of Angular JS real-time ajax requests

I am using Angular to perform a real-time database search. I have bound the variable $scope.city in my HTML like this:

<div class="col-lg-8">
    <div class="input-group">
     <span class="input-group-addon" id="basic-addon1">City@</span>
     <input type="text" ng-model="city" class="form-control" aria-describedby="basic-addon1">
    </div>
</div>

Here is the controller code:

app.controller('forecastController', ['$scope','varService','$http', function($scope,varService,$http){


$scope.city = varService.city;
$scope.days = 2;
$scope.$watchGroup(['days', 'city'], function() {   

        $http.get('http://api.openweathermap.org/data/2.5/forecast?q='+$scope.city+'&mode=json&appid=e652a2c384655ea24f5b12d2fb84c60f&cnt='+$scope.days+'&units=metric')
    .then(function(data) { $scope.forecast = data; });

  });

}]);

Currently, the $http.get() method retrieves data every time the $scope.city changes, which is consuming too many resources. I am looking for a solution where it only calls $http.get every 3-4 seconds after the user inputs something. Using $timeout did not solve the issue. Can anyone help me with this? Thank you.

javascript angularjs

Answer 1

Answer №1

If you find yourself in this scenario, it's crucial to implement some custom logic to handle the situation effectively. For instance, when triggering an event like $watchGroup, it may be necessary to pause execution for a short period before proceeding with your intended process.

Here is a practical guide to assist you through the process:

<div data-ng-app="myApp">
     <div class="col-lg-6" data-ng-controller="myCtrl">
         <div class="input-group">
             <span class="input-group-addon" id="basic-addon1">Country</span>
             <input type="text" ng-model="country" class="form-control" aria-describedby="basic-addon1">
         </div>
     </div>
 </div>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myCtrl', function ($scope, $http, $timeout) {
        $scope.country = "";
        $scope.count = 3;
        var timeoutCheck;
        
        $scope.$watchGroup(['count', 'country'], function () {
            if (timeoutCheck) $timeout.cancel(timeoutCheck);
            timeoutCheck = $timeout(function () {
                alert($scope.country);
                // Make API call here
            }, 3000); // Set desired delay time
        });   
    });
</script>

Answer 2

If you find yourself in this scenario, it's crucial to implement some custom logic to handle the situation effectively. For instance, when triggering an event like $watchGroup, it may be necessary to pause execution for a short period before proceeding with your intended process.

Here is a practical guide to assist you through the process:

<div data-ng-app="myApp">
     <div class="col-lg-6" data-ng-controller="myCtrl">
         <div class="input-group">
             <span class="input-group-addon" id="basic-addon1">Country</span>
             <input type="text" ng-model="country" class="form-control" aria-describedby="basic-addon1">
         </div>
     </div>
 </div>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myCtrl', function ($scope, $http, $timeout) {
        $scope.country = "";
        $scope.count = 3;
        var timeoutCheck;
        
        $scope.$watchGroup(['count', 'country'], function () {
            if (timeoutCheck) $timeout.cancel(timeoutCheck);
            timeoutCheck = $timeout(function () {
                alert($scope.country);
                // Make API call here
            }, 3000); // Set desired delay time
        });   
    });
</script>

Answer 3

Answer №2

To add a delay to the model changes, you can utilize ng-model-options. By setting up a delay, you can then use ng-change to execute a function and retrieve your forecast.

<input ng-model-options="{updateOn: 'default blur', debounce: { 'default': 4000, 'blur': 0 }}" ng-change="getForecast(city)" type="text" ng-model="city" class="form-control" aria-describedby="basic-addon1">

In your controller, you would have:

$scope.getForecast = function(city) { $http.blahblahblah; }

Answer 4

To add a delay to the model changes, you can utilize ng-model-options. By setting up a delay, you can then use ng-change to execute a function and retrieve your forecast.

<input ng-model-options="{updateOn: 'default blur', debounce: { 'default': 4000, 'blur': 0 }}" ng-change="getForecast(city)" type="text" ng-model="city" class="form-control" aria-describedby="basic-addon1">

In your controller, you would have:

$scope.getForecast = function(city) { $http.blahblahblah; }

Reduce the resource consumption of Angular JS real-time ajax requests

Answer №1

Answer №2

Similar questions

How can I merge disabled dates in react-day-picker-input?

What is the best way to search for and isolate an array object within an array of objects using Javascript?

When a label or checkbox is clicked, the absolute positioning triggers a sudden jump to the top of the containing div

Require help transforming a jquery single function into object instances containing multiple functions

Using Angular for Creating Multiple Checkbox Options

Is there a way to adjust the dimensions of the circles?

Iterate through nested objects in Javascript

Can items be conveniently stored in an MVC Controller?

There is a necessary pause needed between carrying out two statements

Encountering the error message "Uncaught Error: Objects are not valid as a React child" even though I am not passing objects as children in my React component

Can three.js provide a function that mimics the movement of a camera?

Issue with jQuery AutoComplete display rendering inaccurately

Ways to utilize a reduce function for field filtering within an object

Troubleshooting an Ajax Error

Angular 2+ Service for tracking application modifications and sending them to the server

Transmit a label through a web address

Unable to retrieve data from object properties despite their visibility

Executing code on the server-side (back-end) using Javascript: A step-by-step guide

Obtaining the scene's coordinates in Three.js

In mongoose.js, the Model.updateOne() function takes precedence over the Document.save() method when executing