Script of javascript blocks ui thread

Question

My js-script calculates a lot of data. For instance, sql.js updates my sqlite database. I want to create a callback with probress bar and text. But the text in html web page is always not updated until the all of my calculations be done.

$array.each(function(index){
// CODE CODE CODE

        $("#pbData").text(index + ' PROGRESS');
        add_line_to_db(db,table_name,name,text);
// CODE CODE CODE
    });

I tried to use something like

$array.each(function(index){
// CODE CODE CODE
        setTimeout(function(){$("#pbData").text(index + ' PROGRESS');},1);
        add_line_to_db(db,table_name,name,text);
// CODE CODE CODE
    });

But it hasn't helped.

How to fix it?

EDIT

I'm createing a sqlite database using sql.js script. The script loops over a table and stores the data to my database. A user wants to see a progress bar of table looping. So, I want to create a callback function for each iteration of sql request.

You are still doing the same stuff as before in your `each` loop, so if that’s what is “blocking” here, then you have done nothing about it so far – a few `setTimeout` thrown in there don’t change anything about what the loop does. If `setTimeout` is used in such a situation (and it might not always be the best solution), then it is used to _replace_ the loop, by calling a function that processes smaller chunks of the data repeatedly (and kind-of recursively). — CBroe, Aug 31 '15 at 17:44
try this `setTimeout(function(){ $("#pbData").text(index + ' PROGRESS'); add_line_to_db(db,table_name,name,text); },1);`. but, i don't imagine this issue. What are text and name? — Sherali Turdiyev, Aug 31 '15 at 17:46
@SheraliTurdiyev , you code gives an error:' Uncaught Database closed ' — Vyacheslav, Aug 31 '15 at 18:02
@trololo, why should you create callback. Please, explain your question understandable — Sherali Turdiyev, Aug 31 '15 at 18:09
@trololo, i answered to your question. please, check it. if doesn't work, let me know — Sherali Turdiyev, Aug 31 '15 at 19:36

toskv · Accepted Answer · 2015-08-31T17:52:51.470

4

Javascript is single threaded, any code you run on that thread will automatically block your UI.

If you have a lot of work to do asyncronously try using a WebWorker to run code in parallel.

Check out the MDN page about the javascript event loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Or this: http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

There's also a very good tool that visually simulates what the event loop does here

edited Aug 31 '15 at 17:52

answered Aug 31 '15 at 17:46

toskv

30,680
7
72
74

It is pity but you are right. only a web worker can help. – Vyacheslav Sep 01 '15 at 05:42

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

Try this instead of each() iteration. it will work, i think. But it's not optimum way. because, inserting time is differently

var i = 0, howManyTimes = array.length, timeForInserting = 3000;
function iterate() {
    //other codes
    $("#pbData").text(i + ' PROGRESS');
    add_line_to_db(db,table_name,name,text);

    //other codes

    i++;
    if( i < howManyTimes ){
        setTimeout( iterate(), timeForInserting );
    }
}
iterate();

How do I add a delay in a JavaScript loop?

edited May 23 '17 at 11:52

Community

1
1

answered Aug 31 '15 at 19:32

Sherali Turdiyev

1,745
16
29

No. Unfortunally, It doesn't work. sql.js totaly freezes the UI. anyway thanks. – Vyacheslav Sep 01 '15 at 05:40

Script of javascript blocks ui thread

2 Answers2

Linked