1

I am writing my first Javascript-Program. I am new to this programming language, therefore I would be very thankful if you could keep the answers simple, so that I can understand them.

Here is my Code: http://jsfiddle.net/7Tfwh/1/

function temp(form) {
var umsatz = parseFloat(form.umsatz.value, 10);
var ebit = parseFloat(form.ebit.value, 10);
umsatzrendite = (ebit / umsatz)*100 + "%";
form.umsatzrendite.value = umsatzrendite;
};

All it does is take 2 variables out of a form and divide them and give back the result. I want to use many more variables, but the calculations will be done very quickly. I therefore would like to give the user the impression, that the calculation is a very complicated one and takes some seconds to post the results.

Therefore I would like to use a loading screen for 3 to 5 seconds, right after the user pushes the "calculating"-Button and of course before he gets the result.

Would be nice if someone could point me to the correct direction.

Thank you.

George

Ninjaedit: Btw I don't know why the Jsfiddle-Version doesn't work properly. On my local environment the calculation is done properly.

John Smith
  • 37
  • 2
  • 6
  • 1
    The JSFiddle doesn't work because the function `temp` is wrapped in a scope whereas the form expects it in global scope. This is something to do with JSFiddle. Add `window.temp = temp;` at the bottom of your script to export `temp`. – Halcyon Jun 25 '13 at 14:56

4 Answers4

1

The easiest approach is; when a user clicks the button:

  1. show a div that contains a loading image or such (tip: use jQuery library)
  2. start a timer
  3. when timer finishes:
    • hide the div
    • perform above function
Community
  • 1
  • 1
Stijn Geukens
  • 15,454
  • 8
  • 66
  • 101
0

After the push of Calculate Button, You can use window.setTimeout function to call the Calculate Math Operation after 2 to 3 seconds.

You can find more information on: http://www.w3schools.com/js/js_timing.asp

Let me know if this is not clear. Can give you working example for the same.You can try it yourself on the link as well.

Halcyon
  • 57,230
  • 10
  • 89
  • 128
Priyesh Potdar
  • 16
  • 2
0

}Another approach would be to use the jQuery library to add a simple effect. You should change the background color, the opacity, or some other value to give the effect of a calculation or dynamic load. 

// change the background color to pink over 2 seconds
// ...then change it back to white
$(form).animate({backgroundColor : "pink"}, 2000).delay(2000).animate({backgroundColor : "white"}, 2000);
Andy Jones
  • 6,205
  • 4
  • 31
  • 47
  • You forgot a curly bracket: $(form).animate({backgroundColor : "pink"}, 2000).delay(2000).animate({backgroundColor : "white"}, 2000); Could you explain, how this works? Do I have to have a set a backgroundColor? I am not too familiar with the .animate function. – John Smith Jun 25 '13 at 15:38
  • thx - you can animate anything - animate just takes a dictionary of CSS key/values. jQuery will smoothly animate the transition between the current CSS and the given CSS over (in this case) 2000ms, or 2 seconds. You can then animate back to the original value after an appropriate delay – Andy Jones Jun 25 '13 at 22:41
0

I tell you how I solved it.

I tried the thing with the window.setTimeout...

For some reason I couldn't use it with my javascript... made only problems... Therefore I used the .delay option from jquery... thank god that jquery is so easy...

Here you can see my results:

http://phptest.klea.internetshop.cc

John Smith
  • 37
  • 2
  • 6