1

Just wondering if it's possible to update a progress bar while using the FileReader (readAsText) or, if not, another way of manipulating a file into arrays/objects and updating a bar accordingly.

More specifically per line of that text file.

reader.onloadend = function (data) {
   var log = data.target.result.split('\n');

   for (var i in log){
       console.log(i);
       $('.progress-bar').attr('ariavaluenow',i).css('width',i).text(i+'%')
   }
};

Assume the progress bar HTML and CSS is already loaded.

I can see the console updating but the progress bar loads at the end with the finished value.

I've tried the above in onprogress but the same result so I'm obviously missing something.

If it's in SO please link me :) and, of course, if you need more info please let me know. I'm relativity new to JavaScript.

James Bellaby
  • 158
  • 14
  • writing to dom/Updating style is way slower than running a for-loop. So what you see is last iteration effect for $('.progress-bar').attr('ariavaluenow',i).css('width',i).text(i+'%') – Pavan Oct 25 '17 at 11:00
  • And you've anyway read the entire file you're just splitting and manipulating it in the memory. – Pavan Oct 25 '17 at 11:01
  • I'm aware of what I'm doing with the file... I need the file to be manipulated and made into different arrays etc. that is beyond the scope of may question. I want to know how to track the progress while doing so. – James Bellaby Oct 25 '17 at 11:03
  • 1
    Because of your document already loaded and your loop in memory if your file content is too small then you can't see your animation on progressbar if you want to see what happing you use sleep function in this link https://stackoverflow.com/a/39914235/8683285 – Ferhat BAŞ Oct 25 '17 at 11:08
  • Perfect! Thank you @FerhatBAŞ – James Bellaby Oct 25 '17 at 11:56

0 Answers0