CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JLaudio
JLaudio

Reputation: 63

Changing cursor to a wait symbol while javascript function is running

I know how to change the cursor to the wait symbol (hour glass/circle of death) but it doesn't register until after the javascript is done running. I tried adding a class to html

in js

 $("html").addClass("waiting");

in css

 html.waiting
 {
    cursor:wait;
 }

and that works but like i said not until after js is done running so to have code like this

 $("html").addClass("waiting");
 foobarFunctionCall();
 $("html").removeClass("waiting");

is pretty worthless because it is turned off before it is even turned on.

I have also tried directly doing

 $("html").css("cursor", "wait");

which works but not until after the js is done running just as the other method does. So it is worthless to use as well.

Is there any function call i can have that updates the cursor property while the js is running so this will register even while js is running?

Other important/relevant info -> the js shown above runs when a div is clicked using jquery and the function is in a nested call back function

 $(document).ready(function () 
 {
       $('.buttonDiv').on('click',function()
            {
                $("html").addClass("waiting");
                foobarFunctionCall();
                $("html").removeClass("waiting");
            });
 }

Note -> this isn't my actual code but is the same method/concept just with all the other irrelevant stuff taken out for simplicity/ less confusion.

Anyone have any solutions? My function can take a while (~10 seconds) depending upon which button is pressed that is why this is very necessary.

I'm guessing it's because it is a callback function but there has to be a way to make this work.

Thanks for any help it is much appreciated!!


RESPONSE TO COMMENTS

the add/remove class event is actually in the function call i just took it out for simplicity. I think that PA and Halcyon are right. It is repainting after the java script but I'm not sure how to do it in the java-script because i don't have code that specifically paints anything. it is all appending/removing/changing html elements or changing css properties/adding classes and those are done as soon as the line of code specifically doing that executes which is why i'm really confused. Those should wait just like the cursor change does. My project is a timeline that dynamically updates itself reading from a file and the function in question is a zoom in and out. None of this is inside a svg element i used only body,ul,li,div,h4,p,br. I'm wondering if maybe the body or html elements are updated separately. I think it may be because the buttons change the cursor to a finger pointer while over the button and the html thinks its still over the button until the code executes but i'm not sure because when u change the cursor on the html you change the cursor over every thing.

Let me break down the zoom function a little: The zoom function only changes how far left justified the timeline elements (the data, the line, and the scale) are so zooming out would make the left property smaller and zooming in would make it larger. The time scale div's (time elements on actual line) are actually removed and re-appended to make it such that there are X number on the screen at a time. The line's width changes. Finally the left property of the data points as well as their popup divs (on click) are changed. All of this is effective inside the function as soon as the line (specific line related to one small part of the total display ex data point's left property being changed) is executed.

@david - yeah i agree that would work but i need those other things to be interactive for their click functionality to work properly. Maybe i should just add a small bit of text that comes up when loading changes occur and ignore the whole cursor change.

okay i just tried the loading text idea i had and it works when i step through the code in a debugger but not when i'm testing it without stepping though. I'm guessing that what i'm trying to do isn't possible because it is going to wait untill all the jquery calls are done and change the screen once complete so its trying to do 1 + -1 all at the same time thus no change.

Anyone know how i can specifically ask it to add the stuff before completing the function?

Upvotes: 0

Views: 3295

Answers (2)

JLaudio
JLaudio

Reputation: 63

Okay guys i figured out how to solve my own problem. Because i am using a call back with jquery (

 $("div_button").on("click",function()
      {
           blahhh....
      });

It isn't going to update the screen until that call back completes (unless stepping through in a debugger for some reason) so by adding and removing the same thing or setting a cursor to a style then setting it back to a different style its undoing itself before it is displayed. The trick to getting this to work is having a separate call back to set up the loading settings first and then removing them at the end of the normal click/on-mouseup event call back function (since click requires mouse up and down it will always run after);

so i needed to add a separate handler see below

 $("div_button").on("mousedown",function()
      {

           setUpLoadingDisplay();
      });
 //note just using .on("mousedown",setUpLoadingDisplay()); doesn't work for some reason 
 //     ->i guess it's not used like a call back in that case

 // and then i have my normal click or mouseUp event handler

 $("div_button").on("mouseup" [or "click"],function()
      {

           foobarFunctionCall();
           removeLoadingDisplay();
      });

Thanks for the help. I know i figured it out myself but ur input was what lead me there.

Upvotes: 1

MaKR
MaKR

Reputation: 1892

Javascript is asynchronous, meaning the function starts and the calling function continues executing. You'll want to put the removeClass() on the last line of the function.

Upvotes: 0

Related Questions