Blocking Ajax intervals from stacking infinitely ?


Blocking Ajax intervals from stacking infinitely ?

Hello,

In my small app, I'm trying to find a way to stop ajax calls (to load all my datas) from stacking infinitely. I'm using Vue 2 and Axios. When I go to a different page (pages are dynamic, using vue and ajax), the interval stack itself and so if I navigate to multiple pages, the ajax intervals just stack themselves which blows the CPU load of the app.

Here is the getter method :

getReunions: function() { if(this.search) { if(this.regexp.nom != "" && this.regexp.date != "") { /** If the name and date is completed */ var url = "/reunion/get/page/" + this.page.actual + "/search/" + this.regexp.nom + "/" + this.regexp.date; } else if(this.regexp.nom != "" && this.regexp.date == "") { /** If the name alone is completed */ var url = "/reunion/get/page/" + this.page.actual + "/search/" + this.regexp.nom + "/null"; } else if(this.regexp.date != "" && this.regexp.nom == "") { /** If the date alone is completed */ var url = "/reunion/get/page/" + this.page.actual + "/search/null/" + this.regexp.date; } else { /** If neither is completed */ var url = "/reunion/get/page/" + this.page.actual; } } else { var url = "/reunion/get/page/" + this.page.actual; } axios.get(url) .then( response => { this.reunions = response.data.reunions; this.loading = false; }) .catch( error => { console.log(error); }); clearInterval(reunionInterval); clearInterval(maxPageInterval); clearInterval(amountInterval); var reunionInterval = setInterval(() => { this.getReunions(); }, rate); var maxPageInterval = setInterval(() => { this.getMaxPage(); }, rate); var amountInterval = setInterval(() => { this.getAmount(); }, rate); } 

I could try to clear the intervals if the variable exists, but the way it is now, the interval still stacks.

Anyone know a way I could do this correctly ?

Thanks.

Submitted February 13, 2017 at 11:42PM by IFThenElse42
via reddit http://ift.tt/2kD0yel