1

Let's say we got an onClick event to a certain div, but before that, we have a big calculation that needs to be done with jQuery which takes like 3 seconds and jQuery is currently busy so it doesn't recognise my event call.

So, 1 second passes and I click on the box. Nothing happens? 2 second. Nothing happens? 3 seconds and jQuery completes his current task. My onclick jQuery event works and the box disappears.

The question is; What would jQuery do in this case? Automatically create a thread to execute my onclick event instantly? Queue the call? (so it would execute my 3 clicks when the task done, hence 3 event calls) Ignore the first 2 call completely? Also, what should I do to avoid this kind of problems?

Aris
  • 2,978
  • 5
  • 22
  • 31
  • 6
    It's javascript, it does'nt react and it has only one thread, where it does things in the order they were received. If a calculation takes three seconds, the developer should probably find something else to in his spare time ? – adeneo Dec 09 '12 at 00:31
  • 3
    why bother asking if you can try it yourself, can you? if you find that the behaviour its not what you need, surely come back here – a0viedo Dec 09 '12 at 00:31
  • Implement your long function in page called through AJAX to avoid web page freezing – sdespont Dec 09 '12 at 01:18
  • @sdespont: You can only do that if it's practical to do it on the server side. For many tasks, it is impractical to do it on the server side. – icktoofay Dec 09 '12 at 01:19

3 Answers3

3

JavaScript functions as if it were single threaded. It's my understanding that some browsers differ in actual implementation, but it is safe to write your scripts with the expectation that they will be executed linearly.

See this Question

I imagine your browser will queue up the clicks during the blocked UI, but it's up to the browser to decide how to handle that scenario. (My Chrome queues up click events during blocked UI)

That said, there's a cool feature implemented in newer browsers:

Web Workers

It allows you to perform expensive/long operations in the background without blocking UI. If your script is going to be running on mostly new browsers, it might be worth digging into this feature. BONUS: that article is written by the originator of jQuery! =)

Community
  • 1
  • 1
Shad
  • 15,134
  • 2
  • 22
  • 34
1

You could probably use a loading bar or a page refresh element to inform the user that something is happening in the background .

user1801279
  • 1,743
  • 5
  • 24
  • 40
0

Have a look at this jsfiddle. On Chrome, as Shad stated, the clicks get queued up and the events are handled when the calculation has finished. One weird thing is that the line before the big calculation

E('status').innerHTML = "Status: started";

doesn't seem to get executed until afterwards. Another surprising thing is how easy it is to make the entire browser hang by repeating a few operations 10,000 or 100,000 times.

If a server side solution is not possible, a solution could be to break the calculation down into smaller batches of operations, and carry them out one batch at a time with an interval of a few milliseconds to allow other parts of the code to operate. In the meantime you might need a 'please wait' message.

Stuart
  • 9,597
  • 1
  • 21
  • 30