how to kill js function in another function's scope

Question

i built the please wait gif animator for my form submission, because the registration takes a bit more time.

now everything works fine, but my gif animation still keeps running even after success message. Thus my animation function is still running. how can i kill that function?

this is what i did now:

function loadSubmit(){
  ProgressImage = document.getElementById('progress_image');
  document.getElementById("progress").style.visibility = "visible";
  setTimeout("ProgressImage.src = ProgressImage.src",100);
  return true;
}

and i call this before my ajax function:

 loadSubmit();
 $.ajax({
   url: "/register_me/",
   type: "POST",
   ...
 }).done(function(){
      // can i somehow kill loadSubmit() function in this scope? 
 });

this would be so good to be able to do it..

thanks a lot

Why can't you just do this - document.getElementById("progress").style.display = "none"; — ShuklaSannidhya
– ShuklaSannidhya, Commented Mar 20, 2013 at 3:51
What is setTimeout("ProgressImage.src = ProgressImage.src",100); supposed to do, exactly? Passing a string to setTimeout seems strange to begin with (I didn't know you could do that), and besides that the string contains code that looks like a no-op. — Celada
– Celada, Commented Mar 20, 2013 at 3:52
@epascarello, yeaaah. sorry for dumbness, i totally misthought. :(. — doniyor
– doniyor, Commented Mar 20, 2013 at 3:53
@Celada: I love your "I didn't know you could do that" comment!!! It gives me hope that a newer generation of js programmers are learning the right things. Way back in 1999 (and up to several years ago) most js programmers didn't know you can pass functions to setTimeout and you will see horrible js with code stored in strings requiring really awkward backslash-escapes to get the quoting right. — slebetman
– slebetman, Commented Mar 20, 2013 at 4:44

vdua · Accepted Answer · 2013-03-20 03:55:46Z

2

setTimeout returns a integer value which can then be used to clear that timeout using the function clearTimeout

function loadSubmit(){
   ProgressImage = document.getElementById('progress_image');
   document.getElementById("progress").style.visibility = "visible";
   // what exactly you want you achieve through this timeout
   return setTimeout("ProgressImage.src = ProgressImage.src",100);

}

var intervalID = loadSubmit();
$.ajax({
  url: "/register_me/",
  type: "POST",
  ...
}).done(function(){
   document.getElementById("progress").style.display = "none"; //EDIT
   clearTimeout(intervalID)
});

Read the documentation for setTimout at MDN https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

EDIT: I misread the question. you need to hide the ProgressImage to hide the gif, you still need to clear the timeout.

answered Mar 20, 2013 at 3:55

vdua

1,3311 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doniyor Over a year ago

great, very nice. thank you. i just show and hide the gif, thats it. i dont need even js function for it basically. now working like a charm! :). Many thanks

vdua Over a year ago

I am not sure whether it will make a difference. AFAIK javascript is single threaded and the timeout events are added to the event queue and when you clear the timeout after hiding the img or before hiding the img, the event will be removed from the queue as well. Please enlighten me if I am wrong.

Collectives™ on Stack Overflow

how to kill js function in another function's scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related