Async Grid Loading onRowSelect Causing Data Issues

I have a basic grid that when a row is selected it loads other subgrids like this…

mainGrid.attachEvent("onRowSelect", function(id, ind) { subGrid1.clearAndLoad(subGrid1Url, "json"); subGrid2.clearAndLoad(subGrid2Url, "json"); });

I have noticed that if I hold the arrow key down, when I finally let up the subgrids contain the wrong data. This is because the requests are async and most of the time the subgrids fill up with data from the last 2 or 3 requests instead of just the very last request. This is really bad for us. We will be using grids that load other grids, forms, etc a lot. I have also noticed this behavior when just clicking rows quickly with the mouse (not holding down the arrow key). What is the best way to solve this? Thanks!