My AJAX request starts freaking out after a few seconds of running

Question

I'm trying to refresh two elements on my page every 4 seconds. My current ajax set up looks like this:

     setInterval(function () {
        update()
     }, 4000);

     function update() {
        $.get('/hello', function (data) {
            console.log("update")
            $('#main').html(data);
        });
     }

Where my HTML has a div with the id main that contains both the sets of s.

After a few seconds of working, my lists start duplicating items like crazy and the page starts lagging. I get an error in my console saying "insufficient resources". In addition, I've noticed that the "update" that is supposed to be logged in the console does not happen every 4 seconds, rather it keeps logging in less than .5 seconds.

I've tried using setTimeout but it doesn't work.

My handlebars code looks like this:

<div id="main">

    <div id="recalled">
        <ul id="list">
            {{#each thing}}
            <li>
              this.something
            </li>
            {{/each}}
        </ul>
    </div>

    <div id="more">
        <ul>
            {{#each anotherThing}}
            <li>
               this.property
            </li>
            {{/each}}
        </ul>
    </div>
</div>

My express code is rendering the entire page after searching (asynchronously) a mongo database.

await User.find( {some search parameter}, function(error, data) {
res.render("thePage", {thing: data[0], anotherThing: data[1})
})

The data that is being rendered initially is fine.

I just want to refresh the list elements every few seconds using ajax to show any updates to a certain property of my User model. The ajax request starts freaking out after a few seconds and is not giving me the output i expect.

Thank you for your help!

Sounds like your setInterval call is reloading the page which triggers setInterval again and adds another handler which also reloads the page which... After a while you have a lot of setInterval handlers which all try to reload the page. — Joachim Isaksson, Jun 13 '19 at 05:32

score 1 · Answer 1 · answered Jun 13 '19 at 07:25

Take a look at this post. In your current code you are strictly calling the update function every 4 seconds regardless of the result of the previous call. Since ajax calls are asynchronous you should rather use setTimeout to ensure that your previous call has finished.

score 0 · Answer 2 · answered Jun 13 '19 at 07:30

The main problem in your code is setInterval. setInterval sounds very easy but this is generally a evil. The problem with your code is that setInterval discards if the request to the server was complete or not. It just stacks up the call after 4s (which might not be 4 exactly). Your api call may sometimes take more than 4 seconds to complete then you go into the mess.

There are many ways to get around this. One simple solution will be to use

setTimeout(update,4000)

this should be use in the after you receive the response from the api call.

function update() {
    $.get('/hello', function (data) {
        console.log("update")
        $('#main').html(data);
        setTimeout(update,4000)
    });
 }

My AJAX request starts freaking out after a few seconds of running

2 Answers2