I am asynchronously receiving data (from 0 to 100 points per second) that is passed to a high-startup-cost function, extendTraces(data), which updates the user interface. If I call extendTraces() upon generating every point, the user interface becomes unresponsive. I've found that it is much more efficient to call the function periodically and pass it an array of points, call it pointArray.

I can track how many points have been added to pointArray and call extendTraces(pointArray) every 20th addition:

```
//inside asynchronous function
pointArray.push(point);
if (this.pointArray.length == 20){
    (<any>Plotly).extendTraces(this.pointArray);
    this.resetPointArray();
}

```

But if I fill pointArray halfway and don't receive any data for a while, I'd also to call extendTraces. 

My solution is to call extendTraces() every second

```
//inside a function that is called when the page loads
window.setInterval(function() {
    if (pointArray.length > 0){
        (<any>Plotly).extendTraces(this.pointArray);
        this.resetPointArray();
    }
}, 1000);

```

My function that receives the points will simply concatenate them onto the pointArray.

```
//inside asynchronous function
pointArray.push(point);

```

I am new to js and was wondering if I'm using the correct paradigms for this task. I see a lot of information about callbacks and promises which I don't fully understand but I am suspicious that I'm doing something wrong by not using them. Coming from c++, I am concerned that two functions, the function defined in setInterval and the asynchronous function that receives points, both have access to the pointArray without any hardcoded mutex.