Executing only the last function called

Question

Hello!

This is the setup in short. I have a big table. Everytime a cell get focus an asyncron call to the server is done (with PageMethods) and some data is returned and updates a infobox in the page. I have written code that makes it possible to navigate between cells with the arrow keyes. The problem occurs when I shift focus fast through several cells in order to get to the cell I want. Every get-focus is executed and since the communication with the server takes about half a second it get quite irritating and not very user friendly. Ideally I would like to execute only the last focus event. But how? I cant know which event is the last one, can I? Ideas, anybody?

Answer 1

In principal you need a timer of a short period that starts counting down when a focus event is raised. If another event occurs before the timer expires then you restart it, if not then you execute the OnFocus logic for whatever the last cell was.

The trick is to make it short enough to keep the UI feeling responsive, but long enough to avoid triggering multiple calls to the server.

Unfortunately for you I don't know how you'd do this for ASP.NET, but I've done it in Winforms for similar situations.

Answer 2

Paolo is right on.

To do this on the web you would combine your current Focus Event with the javascript timing functions setTimeout and clearTimeout:

var timer; // timer variable in scope for other functions

var onFocus = function() {
  clearTimeout(timer);
  timer = setTimeout("makePageMethodCall()", 500);
}

var makePageMethodCall = function() {
  // make ajax call to your PageMethod function
}

The call to setTimeout() is creating a half second wait time before invoking the method that will make the call to your server. If another focus event occurs before this timer expires, the clearTimeout() call will cancel the current timer before another one is started. As Paolo recommends, you can experiment with the 500ms time length to find the value that suits your situation best.