JavaScript listeners keep increasing

I implemented a web application and monitored the performance with the google developer tools. I notice that the listeners keep increasing and so is the heap.

enter image description here

The part where the listeners are increasing looks something like this

let ival = $interval(function () {
    $http.get('someurl') // this call is actually done through a service, don't know if that matters
}, 1000)

I would understand if the heap grows because of some data not beeing collected by the garbage collector but I don't understand why the listeners are increasing?

Here is a reproducable, minimal example:

The index.html file:

<!doctype html>
<html ng-app="exampleModule">
    <script src=""></script>
    <script src="script.js"></script>
    <div ng-controller="someController">

And the script.js file:

angular.module("exampleModule", [])
  .controller("someController", [ "$http", "$interval", function ($http, $interval) {

    $interval(function () {
    }, 1000)


The results when you watch the performance are the same as in the picture above. You should use a simple webserver in order to make the GET request.



According to this issue, more specifically this comment, it's caused by Chrome not garbage collecting listeners during recording of the performance timeline.


Your get request probably lasts more than 1 second. But you call it every 1 second. So one request starts before other one finishes, and they pile up, eventually getting slower.

I suggest, don't do a request if the previous one isn't finished:

let previousOneOngoing = false;
let ival = $interval(function () {
    if(previousOneOngoing) return;
    previousOneOngoing = true;
        .then(function() { previousOneOngoing = false; })
}, 1000)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.