Не сразу обновляются данные на странице в приложении созданном на electron, как обойти?

Question

[Robot Chappie]

Есть небольшое приложение сделанное при помощи electron. есть 2 файла index.js и index.html
в index.js мы создаем окно.
в index.html создана разметка в виде кнопок и есть js код который с ними взаимодействует.
Столкнулся с проблемой, в открывшемся приложении нажимаем на кнопку старт, которая в свою очередь запускает код js.
Код JS читает файл построчно, после каждой итерации он создает элемент <li>строка из файла</li>в структуре html, но выводит на экран все созданные элементы только после завершении всего цикла.
А должен выводить на экран строку после каждой итерации. Такое чувство как будто electron блокирует вывод html структуры, когда выполняется js код. Тем самым не получается даже добавить Анимацию ожидания, когда выполняется код js.

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

Answer 1

[Дмитрий Беляев]

Это нормальная работа webkit - собирать все dom-операции вместе и применять за один раз, в конце потока выполнения (перед event-loop)
Делайте цикл чтения-вывода асинхронным, тогда все будет отрисовываться в процессе

const fs = require('fs');

function readAndDisplayFile(file, list) {
  var stream = fs.createReadStream(file);
  var buf = '';
  stream.on('readable', () => {
    var data = stream.read();
    if(data === null) {
      return;
    }
    buf += data.toString();
    checkBufLines();
  });
  stream.on('end', () => {
    buf += '\n';
    checkBufLines();
  });
  function checkBufLines() {
    var pos = buf.indexOf('\n');
    if(pos === -1) {
      return;
    }
    var line = buf.substr(0, pos);
    buf = buf.substr(pos + 1);
    var li = document.createElement('li');
    li.innerText = line;
    list.appendChild(li);
    setImmediate(checkBufLines);
  }
}
module.exports.readAndDisplayFile = readAndDisplayFile;

примерно как то так

Comments

[Robot Chappie]

Спасибо

Answer 2

[napa3um]

Всё "тяжёлые" вычисления осуществляйте в отдельном процессе: stackoverflow.com/questions/36942555/does-the-elec... . Или просто используйте асинхронный цикл (например, с помощью caolan.github.io/async/docs.html#.eachSeries ), чтобы давать возможность исполниться коду рендеринга данных между итерациями.

Comments

[Robot Chappie]

Спасибо