Instant updating UI elements using javascript -


i know maybe not possible. have searched web without suceess

i have while loop , want 2 things:

  1. update textarea formatted information
  2. update width of div (a progress bar).

the first function has 4-5 additional sub-functions.

basically have 6 elements numerical array. have custom format function create formatted string elements numbers. etc.

if (reg_index/reg_total > last_refresh) {         window.settimeout (          function() {             document.getelementbyid("progress_line").style.width = "" + 100 * last_refresh + "px";             document.getelementbyid("progress_value").innerhtml = my_format( 100*last_refreh, "###" ) + "%";          },          5     );      last_refresh+=0.01;  } 

ok, i'm unable define right timeout interval want.

can point me useful link?

thanks.

the problem you're having here all of functions use last value of last_refresh. when define function, has enduring reference variables in scope, not copy of values when it's created. more: closures not complicated

you this:

function update() {     if (reg_index/reg_total>last_refresh)          document.getelementbyid("progress_line").style.width =" "+100*last_refresh+"px";         document.getelementbyid("progress_value").innerhtml=my_format(100*last_refreh,"###")+"%";          last_refresh+=0.01;          settimeout(update, 0); // or 5 or whatever     } } update(); 

that uses function bit of work, schedules more of work in moment. closes on reg_index, reg_total, , last_refresh variables.

if know needs run @ least once, can make more efficient:

function update() {     document.getelementbyid("progress_line").style.width =" "+100*last_refresh+"px";     document.getelementbyid("progress_value").innerhtml=my_format(100*last_refreh,"###")+"%";      last_refresh+=0.01;      if (reg_index/reg_total>last_refresh)          settimeout(update, 0); // or 5 or whatever     } } update(); 

to concept of looping settimeout, compare standard loop (the browser doesn't update until end): live copy | live source

var = ["zero", "one", "two", "three", "four", "five"]; var index;  (index = 0; index < a.length; ++index) {     display("entry " + index + " " + a[index]); } 

...with equivalent using settimeout, yields browser on every iteration can update (and if interval 0, runs more slowly — i've used 200 here can see run): live copy | live source

var = ["zero", "one", "two", "three", "four", "five"]; var index;  index = 0; update(); function update() {     display("entry " + index + " " + a[index]);     ++index;     if (index < a.length) {         settimeout(update, 200);     } } 

below you've said:

unfortanetly cant apply @ example.... have main loop 2000 reads on local database.... have done works using timeouts code spends lot of time

i deal breaking things in chunks (or see below alternative), example: live copy | live source

var index; var total = 10000; // 10,000 in total  index = 0; update(); function update() {     var limit = math.min(index + 100, total); // them 100 @ at time     while (index < limit) {         if (index % 10 == 0) {             display("process entry #" + index);         }         ++index;     }     if (limit < total) {         settimeout(update, 200);     } } 

choose size of chunks you're updating (yield) enough, not updating (yielding) lose time. above based on number of loops, way let run (say) 1 full second , yield. can lot of work done in second.

the other alternative use web workers, @ least on the browsers support them. my other answer here on stack overflow has discussion , example.

even if use web workers, though, you'll want break work chunks, because if have 2,000 records through, doesn't make sense update progress bar 2,000 times &mdasdh; you'll updates human can't readily perceive. 100 updates more enough, 20 (so, 100 records/chunk) fine.


Comments