Unresponsive script - is it possible to avoid it?

Question

I have a listing with 150 rows and for each row there are three skinned select items.

Because there's heavy processing to be done before displaying each result I get an error saying "A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete." and it refers to jquery.js file.

Is it possible to avoid this error by doing some jQuery work?

Thank you.

http://stackoverflow.com/questions/1917380/how-to-avoid-the-unresponsive-script-popup-in-firefox-with-long-running-javascri — Riz, May 23 '12 at 09:12

ThiefMaster · Answer 1 · 2012-05-23T09:14:47.123

6

You need to split your processing into multiple parts and give the browser some time to do stuff besides them by using a 0 or 1 msec setTimeout.

A very easy method would be using the forEachSeries method of the async library:

async.forEachSeries(yourData, function(item, cb) {
    // process item
    async.nextTick(cb);
});

yourData could be the jQuery object containing your rows, then item will be the DOM element of one row.

edited May 23 '12 at 09:14

answered May 23 '12 at 09:09

ThiefMaster

310,957
84
592
636

is `0 or 1 msec setTimeout` enough? – Ram May 23 '12 at 09:11
yes it is, because tasks that are waiting will get executed at the moment the script stops. JavaScript is single threaded so the execution will actually not start before the newly started code has finished. So the duration does not really matter – Koen Peters May 23 '12 at 09:13
So I need to add this timeout in the JS, not in the PHP, right? – Psyche May 23 '12 at 09:14
Yes, this is a client-side thing. – ThiefMaster May 23 '12 at 09:15
Oh, but I don't have a loop or something in JS. I'm using JS just to skin that select item. All the processing is done in PHP. – Psyche May 23 '12 at 09:16
Check out my asnwer. It has a link to a page where this technique is described – Koen Peters May 23 '12 at 09:20
There has top be a javascript that is doing a lot of work otherwise you would not see the message you described. Are you perhaps doing ajax using synchronous calls? That will block the UI as well. – Koen Peters May 23 '12 at 09:22

score 0 · Answer 2 · answered May 23 '12 at 09:12

I don't know about jQuery (if there is some wrapper available in jQuery), but in vanilla JS there is the concept of WebWorkers (support is rather good except for IE - see here).

Here you start an extra thread to to you computations, that does not block your UI thread. When the computations are done and just the result display is left over, you send the data from the worker to the UI thread and just display the results.

For details, have a look at the MDN tutorial.

score 0 · Answer 3 · edited Feb 07 '14 at 23:05

0

Download JavaScript as and when required, instead of downloading it all on page load.

On Demand JavaScript

edited Feb 07 '14 at 23:05

Kara

6,115
16
50
57

answered May 23 '12 at 09:16

Vishal

2,161
14
25

score 0 · Answer 4 · answered May 23 '12 at 09:16

Website performance guru Steve Souders wrote about this problem and how to solve it in his book "Even faster web sites". He describes a solution where you use timeouts to let other processes get some time as well.

Here's the part of the book that deals with this problems.

Unresponsive script - is it possible to avoid it?

4 Answers4