I am currently working on a browser tool that analyzes a large file and provides statistics based on its content.
The tool randomly selects k parts of the file for processing, treating each part individually. As each part is processed, an object is updated to keep track of the running "stats" of the file (for simplicity, this example shows incrementing a rolling counter).
One challenge I am facing is that all parts are being read in parallel, but I would prefer them to be processed sequentially to ensure thread safety when updating the rolling counter.
It seems like the next processFileChunk call within the for-loop is happening before the previous one finishes. How can I make sure these operations occur serially?
As someone relatively new to Vue and frontend development in general, I wonder if this issue stems from asynchronous behavior. Is there a way to identify and manage asynchronicity in my code?
Edit: The parsing process involves using the papaparse library (which I suspect introduces asynchronous operations).
import {parse} from 'papaparse'
export default {
data() {
counter: 0
},
methods() {
streamAndSample(file) {
var vm = this;
const k = 10 // number of samples
var pointers = PickRandomPointers(file) // an array of integers representing random byte locations in the file
for (const k_th_random_pointer in pointers) {
processFileChunk(file, k_th_random_pointer)
}
}
processFileChunk(file, k_th_random_pointer){
var vm = this;
var reader = new FileReader();
reader.readAsText(file.slice(k_th_random_pointer, k_th_random_pointer + 100000)) // reading 100 KB
reader.onload = function (oEvent) {
var text = oEvent.target.result
parse(text,{complete: function (res) {
for (var i = 0; i < res.data.length; i++) {
vm.counter = vm.counter + 1
}}})
}
}
}
}