how alert make javascript interrupt? can I do it with code?

Question

I'm procesing a kind of "big" JSON object around of 4000 elements passing for different methods, and I would like to update a div tag with a text showing the process.

But for some strange reason (just tested in Firefox and Chrome), they don't update the DOM object with the text.

$("#estatusBar").text(_item.Centro_de_trabajo);

Both prefer to continue calculating all the data and other process without and dont take the time for update the text. But if I just code an Alert("") in the loop and then in chrome I click on the "selected box" saying ignore all other alerts, chrome suddenly starts updating the text.

So I was thinking if I can "pause" the calculation with some kind of code to stop and update the DOM element and then continue making the other process?

Is this possible or what is an alternative to this strange behavior?

-- EDIT --

this is the code of the loop

    $.each(plantillas, function(_index, _item){
        updateBar(_item.Centro_de_trabajo);
        calculateItem(_item,_index);
        a.push("<div class='blockee'><ul>"+ /*temp.join("")*/ t(_item) +"</ul></div>");
    });

You will need to use a timer (setInterval/setTimeout) to split up your processing into chunks. Web workers could be used but this would limit those with older browsers. — Lee Taylor, Apr 19 '13 at 17:50
In your scenario, you should be looking at callback rather than timeout/interval. Show more code if you need more help — hop, Apr 19 '13 at 17:58
@hop I think basically this is happening http://www.html5rocks.com/en/tutorials/workers/basics/ but this solution include webworkes as Vivin Paliath suggest — ncubica, Apr 19 '13 at 18:04

score 1 · Answer 1 · answered Apr 19 '13 at 17:52

1

You can try using web workers, to defer the calculation to the background, and this should help you out. Web workers were designed to do this very thing (push large calculations to a background thread). However, this may not work in all browsers. Your main concern is IE, and only IE 10 supports it:

enter image description here

answered Apr 19 '13 at 17:52

Vivin Paliath

94,126
40
223
295

I think here is a complete answer of this http://www.html5rocks.com/en/tutorials/workers/basics/ – ncubica Apr 19 '13 at 18:03

6502 · Accepted Answer · 2013-04-20T08:13:40.303

No you cannot do what alert does. This limitation is really annoying in some cases but if your problem is just a progress for a single long computation then the solution is simple.

Instead of doing alll the records in one single loop break the computation in "small enough" chunks and then do something like

function doit()
{
    processBlockOfRecords();
    updateProgressBar();
    if (!finished()) {
        setTimeout(doit, 0);
    }
}

setTimeout(doit, 0);

With this approach is also simple to add an "abort" button to stop the computation.

In your example the loop is

$.each(plantillas, function(_index, _item){
    updateBar(_item.Centro_de_trabajo);
    calculateItem(_item,_index);
    a.push("<div class='blockee'><ul>"+ /*temp.join("")*/ t(_item) +"</ul></div>");
});

so the computation could be split with (untested)

function processRecords(plantillas, completion_callback) {
    var processed = 0;
    var result = [];

    function doit() {
        // Process up to 20 records at a time
        for (var i=0; i<20 && processed<plantillas.length; i++) {
            calculateItem(plantillas[processed], processed);
            result.push("<div class='blockee'><ul>" +
                        t(plantillas[processed]) +
                        "</ul></div>");
            processed++;
        }

        // Progress bar update
        updateProgress(processed, plantillas.length);

        if (processed < plantillas.length) {
            // Not finished, schedule another block
            setTimeout(doit, 0);
        } else {
            // Processing complete... inform caller
            if (completion_callback) completion_callback(result);
        }
    }

    // Schedule computation start
    setTimeout(doit, 0);
}

But the do it function should go inside of the loop? Im no very clear in this concept. Im updating my question. with code... — ncubica, Apr 19 '13 at 18:19

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

Do you want some version of wait or pause or sleep or similar in javascript is that it?

The only way is with

window.setTimeout()

You can pause any function with it.

Check this post too might help: Sleep/Pause/Wait in Javascript

edited May 23 '17 at 12:18

Community

1
1

answered Apr 19 '13 at 17:53

Hugo Rocha

537
5
23

how alert make javascript interrupt? can I do it with code?

3 Answers3