how to refresh method in every 30 seconds using setinterval in angular js

Question

I have dropdown list, in ng-change event calling ajax call and showing some data but I need the method to execute every 30 seconds. so that i can updated value in every 30 sec I did refresh mechanism but there are several requests are calling instead of 1.

first time its triggering 1 time after that its triggering double of earlier no of requests like 1, 2, 4, 8, 16, 32,64 times requests are executing

Select PIR Device

 <th> <select class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" ng-model="sel_val" ng-change="getPIRData(sel_val.deveui)" ng-options="data.deveui for data in Customers">Select PIR Device</select></th>

 var app = angular.module('PIR_Detection', []);
    app.controller('myCtrl', function ($scope, $http, $window) {
        $scope.sel_val = 0;
        $scope.DefaultLabel = "Loading.....";
        var post = $http({
            method: "get",
            url: "../data.json",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
        post.success(function (data, status) {
            $scope.Customers = data;
        });
        post.error(function (data, status) {
        });

        $scope.getPIRData = function (id) {
            var url = "/PIRDetails/GetPIRStatus/" + id;

         setInterval(function () {
                        $scope.getPIRData(id);
                    }, 30000)     
            $http.get(url)
                .then(function (response) {
                    $scope.myWelcome = response.data;
                    $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);
                    $scope.timestamp = getIST (response.data.timestamp);
                    $scope.rssi = response.data.rssi;

                });
        };

    });

Mister Amen · Accepted Answer · 2019-03-25T20:02:39.070

0

The problem here is that you call the setInterval function inside your response process.

Every time your request is processed, you schedule a new function scheduling for every 30 seconds, rather than a new function call every 30 seconds.

$scope.getPIRData = function (id) {
            var url = "/PIRDetails/GetPIRStatus/" + id;


            $http.get(url)
                .then(function (response) {
                    $scope.myWelcome = response.data;
                    $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);
                    $scope.timestamp = getIST (response.data.timestamp);
                    $scope.rssi = response.data.rssi;

                });
        };
setInterval(function () {
                        $scope.getPIRData(id);
                    }, 30000)

I removed the setInterval call from the scope of the response processing. This should now work.

edited Mar 25 '19 at 20:02

answered Mar 25 '19 at 12:11

Mister Amen

81
5

1

+ consider using $timeout, + do not forget to cancel your timeout e.g. on scope destroy – Petr Averyanov Mar 25 '19 at 12:32
Great tip Petr! I wrote my answer in such fashion that it would be closest to the original question, but such improvements are definitely welcome – Mister Amen Mar 25 '19 at 13:21
hi @MisterAmen i tried ur solution , but still getting same results with in few seconds some thousands of events or requests are triggering, i have updated my code, can u check it – krishna mohan Mar 25 '19 at 17:09
krishna i can see why that happened. The set interval was still in the function. I updated my answer to better reflect your context. This implementation should fix your issue – Mister Amen Mar 25 '19 at 20:04
With the AngularJS framework, use [$interval](https://docs.angularjs.org/api/ng/service/$interval). AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. – georgeawg Mar 25 '19 at 20:50
1

@PetrAveryanov don't confuse [$interval](https://docs.angularjs.org/api/ng/service/%24interval) with [$timeout](https://docs.angularjs.org/api/ng/service/$timeout). – georgeawg Mar 25 '19 at 20:55

how to refresh method in every 30 seconds using setinterval in angular js

1 Answers1