Autoreload jqgrid and stop when editing

Question

I'm trying to implement autorefresh grid, and stop when user edit/add/search, so I use clearInterval in ondblClickRow event (since I use inline edit).

So, my problem is when and where to restart de autoreload. I try in the loadComplete event, which seems to be the beter place, BUT everytime loadComplete fires setInterval() to reloadGrid, it "multiplies" the reloadGrid call! In other words, first time (after 8 seconds) it reloads ok. Second time it call 2 reloads. Third time it call 4 reloads. Fourth time it calls 8 reloads, and so on... which means many ajax requests each time!

What is incorrect? I would appreciate some help, thanks!

Here is my code:

var mySeconds = 10 * 1000; //seconds *1000
var myTimer;

function autoReloadGrid($grid) {
    $grid.trigger("reloadGrid", [{current:true}]);
};

var $myGrid = $("#myGrid");

$myGrid.jqGrid({ 
    //grid options here...

    ondblClickRow: function(rowId) {
        clearInterval(myTimer);     
        //editRow here...
    },

    loadComplete: function() {
        console.log('myTimer = ' + myTimer);
        myTimer = setInterval( function() { autoReloadGrid($myGrid) }, mySeconds);
    }
 })

Note: I test the myTimer value using console.log and it shows a different ID every time it fires.

Answer 1

The main problem in your code is the following: you can create multiple timers which execute autoReloadGrid. You cancel only the last created timer inside of ondblClickRow.

It's important to understand that loadComplete can be executed multiple times: on paging, sorting and so on. So I recommend you to include call of clearInterval before setInterval.