Fetch Data with interval in javascript?

Question

i have the following code with Pusher:

Echo.private("channel").listen(".foobar", (e) => {
   this.fetchData();
});

When there is an incoming request, I want data to be fetched again. But not on every Pusher event. I want the data to be fetched only once in 5 seconds.

I was thinking about a interval that is reset when there is a new incoming event, but how to achieve this?

Answer 1

Ok, first of all it's a Laravel Echo code. It may be using pusher behind the scenes, but saying it's a pusher code is slightly incorrect.

Then, if I understand you right, you need some kind of debounce function. For example lodash offers one.

const debouncedFunction = _.debounce(() => {
    this.fetchData()
}, 5000);

Echo.private('channel').listen('.foobar', e => {
   debounced()
})

debounce will create debounced version of function which you can then call, or even cancel, because it comes with cancel method.

debouncedFunction.cancel()