Search code examples
javascriptajaxcursor

Javascript cursor: sequence of events

I have been searching but can't find anything relevant to my issue. I need to change the cursor when a user initiates an action so they don't shotgun the request.

The statement to change the cursor is simple enough, but I can't get it to fall into sequence correctly. My cursor doesn't change until the function completes. I can see this by commenting out the statement to return the cursor to normal behavior.

I want the cursor to go to wait and stay that way until the call tot he ajax function is done, then return to normal.

// wrapper to set wait cursor during ajax calls (the cursor change doesn't work, btw -- leaving it here so it can be fixed)
function loadForm(){
    setTimeout("document.getElementsByTagName('BODY')[0].style.cursor = 'wait'",1);
    populateReadPage();
    setTimeout("document.getElementsByTagName('BODY')[0].style.cursor = 'auto'", 1);
}

// configure calls to populate entire page: first string identifies the call, the second string identifies the custom function to implement
function populateReadPage(){
    setScreenObject("noncom","grid1");
    setScreenObject("cur_cert","grid2");
    setScreenObject("cur_hecm","grid3");
    setScreenObject("prev_cert","grid4");
    setScreenObject("prev_hecm","grid5");
}
Solution

  • Javascript execution is single-threaded, so this is what happens when you execute the loadForm function:

    1. setTimeout(Action1,1) : Action1 is enqueued to be executed when the current (main) execution line finishes
    2. populateReadPage() : This method is executed
    3. setTimeout(Action2,1) : Again, Action2 is enqueued to be executed when the current (main) execution line finishes.
    4. Nothing else in the main line, Action1 is executed
    5. Action2 is executed

    UPDATE: After some research, it seems that the body style changes need a "pause" to be set, so I made it work with the following code:

    function loadForm(){
  document.body.style.cursor = 'wait'; //sets the cursor to wait

  setTimeout(()=> { //enqueues the tasks
     populateReadPage();
     document.body.style.cursor = 'auto'; //once all is done, sets the regular pointer
  });
}

    Just one thing: the cursor does not change until it moves, not sure why