Настройка индикатора прогресса Para с веб-работниками

Я работаю над веб-приложением для анализа CSV, которое собирает данные, а затем использует его для рисования графика графика. Пока это работает хорошо, но, к сожалению, для анализа файлов CSV с папапарсом требуется некоторое время, хотя они всего лишь около 3 МБ.Настройка индикатора прогресса Para с веб-работниками

Так что было бы неплохо продемонстрировать определенный прогресс, когда «папа» работает. Я мог бы пойти на дешевый скрытый div, показывая «Я работаю», но предпочел бы использовать <progress>.

К сожалению, бар просто обновляется ПОСЛЕ завершения папы. Поэтому я попытался войти в webworkers и использовать рабочий файл для расчета прогресса, а также установить worker: true в конфигурации Papa Parses. Все равно нет.

Используемые конфигурации (с шагом функцией) является, как следует:

var papaConfig = 
    { 
     header: true, 
     dynamicTyping: true, 
     worker: true, 
     step: function (row) { 
      if (gotHeaders == false) { 
       for (k in row.data[0]) { 
        if (k != "Time" && k != "Date" && k != " Time" && k != " ") { 
         header.push(k); 
         var obj = {}; 
         obj.label = k; 
         obj.data = []; 
         flotData.push(obj); 
         gotHeaders = true; 
        } 
       } 
      } 

      tempDate = row.data[0]["Date"]; 
      tempTime = row.data[0][" Time"]; 
      var tD = tempDate.split("."); 
      var tT = tempTime.split(":"); 
      tT[0] = tT[0].replace(" ", ""); 
      dateTime = new Date(tD[2], tD[1] - 1, tD[0], tT[0], tT[1], tT[2]); 

      var encoded = $.toJSON(row.data[0]); 

      for (j = 0; j < header.length; j++) { 
       var value = $.evalJSON(encoded)[header[j]] 
       flotData[j].data.push([dateTime, value]); 
      } 

      w.postMessage({ state: row.meta.cursor, size: size }); 
     }, 
     complete: Done, 
    }

конфигурация работник на основном сайте:

var w = new Worker("js/workers.js"); 

w.onmessage = function (event) { 
    $("#progBar").val(event.data); 
};

и вызываемый работник:

onmessage = function(e) { 
    var progress = e.data.state; 
    var size = e.data.size; 
    var newPercent = Math.round(progress/size * 100); 

    postMessage(newPercent); 
}

Индикатор выполнения обновляется, но только после того, как файл CSV разобран и сайт настроен с данными, поэтому работа er, но ответ обрабатывается после разбора. Папа-парс, похоже, тоже называется у рабочего. Или, похоже, если проверять вызовы в средствах отладки браузеров, но все же сайт не отвечает, пока не появятся все данные.

Может ли кто-нибудь указать мне на то, что я сделал неправильно или где отрегулировать код, чтобы получить рабочий индикатор выполнения? Думаю, это также углубило бы мое понимание веб-работников.

источник

2016-07-27 Blind Seer

Я не использовал папа Разбирает с рабочими и раньше, но несколько вещей, которые всплывают после игры с ней немного:

Это, кажется, не ожидает, что вы напрямую взаимодействовать с работником
Он ожидает, что вы либо хотите весь конечный результат, или отдельные элементы

Использование веб-работник делает обеспечивая JS Fiddle неосуществимым, но вот некоторые HTML, который демонстрирует вторую точку:

<html> 
<head> 
    <script src="papaparse.js"></script> 
</head> 

<body> 
<div id="step"> 
</div> 

<div id="result"> 
</div> 

<script type="application/javascript"> 
    var papaConfig = { 
     header: true, 
     worker: true, 
     step: function (row) { 
      var stepDiv = document.getElementById('step'); 
      stepDiv.appendChild(document.createTextNode('Step received: ' + JSON.stringify(row))); 
      stepDiv.appendChild(document.createElement('hr')); 
     }, 
     complete: function (result) { 
      var resultDiv = document.getElementById('result'); 
      resultDiv.appendChild(document.createElement('hr')); 
      resultDiv.appendChild(document.createTextNode('Complete received: ' + JSON.stringify(result))) 
      resultDiv.appendChild(document.createElement('hr')); 
     } 
    }; 

    var data = 'Column 1,Column 2,Column 3,Column 4 \n\ 
1-1,1-2,1-3,1-4 \n\ 
2-1,2-2,2-3,2-4 \n\ 
3-1,3-2,3-3,3-4 \n\ 
4,5,6,7'; 

    Papa.parse(data, papaConfig); 
</script> 
</body> 

</html>

Если запустить этот локально, вы увидите, вы получите линию для каждой из четырех строк данных CSV, но вызов complete обратного вызова получает undefined. Что-то вроде:

Step received: {"data":[{"Column 1":"1-1",... 
Step received: {"data":[{"Column 1":"2-1",... 
Step received: {"data":[{"Column 1":"3-1",... 
Step received: {"data":[{"Column 1":"4","... 
Complete received: undefined

Однако если вы удалите или закомментируйте функцию step, вы получите одну строку для всех четырех результатов:

Complete received: {"data":[{"Column 1":"1-1",...

Отметим также, что папа Анализировать использует концепцию потокового поддержки обратный вызов step независимо от использования рабочего или нет. Это означает, что вы не знаете, сколько элементов вы анализируете напрямую, поэтому вычисление процента завершено невозможно, если вы не можете найти длину элементов отдельно.

источник

2016-07-28 14:50:26

Вы можете использовать FileReader API, чтобы прочитать файл в виде текста, разделить строку на «\ n» и затем подсчитать длину возвращаемого массива. Это ваша переменная размера для вычисления процента.

Затем вы можете передать строку с файлом в папку Papa (вам не нужно перечитывать непосредственно из файла) и передать количество строк (переменную размера) вашему работнику. (Я не знаком с работниками, и поэтому не знаю, как вы это делаете.)

Очевидно, что это точно работает только в том случае, если внутри csv-файла нет встроенных разрывов строк (например, если строка распространяется по нескольким строкам с разрывами строк) так как они будут считаться дополнительными строками, поэтому вы не сможете сделать это до 100%. Не является фатальной ошибкой, но может показаться странным для пользователя, если он всегда заканчивается до 100%.

Вот пример кода, который даст вам идеи.

var size = 0; 

function loadFile(){ 
    var files = document.getElementById("file").files; //load file from file input 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload = function(event){ 
    var csv = event.target.result; //the string version of your csv. 
    var csvArray = csv.split("\n"); 
    size = csvArray.length; 
    console.log(size); //returns the number of rows in your file. 
    Papa.parse(csv, papaConfig); //Send the csv string to Papa for parsing. 
    }; 
}

источник

2016-08-11 15:58:35 apb21

Настройка индикатора прогресса Para с веб-работниками

ответ

Смежные вопросы