javascript streamreader отображает только второй фрагмент в #log-box.append

Question

Я изо всех сил пытаюсь изучить JQuery/Javascript, и у меня есть веб-приложение, использующее хромированный "экспериментальный" веб-интерфейс API. Когда я ввожу команду и получаю ответ, эта строка разбивается на 2 части в случайном месте, обычно в первой трети:

<p0><iDCC-EX V-0.2.1 / MEGA / STANDARD_MOTOR_SHIELD G-9db6d36>

Все остальные ответные сообщения короче и заключены в скобки "<" и ">".

В коде ниже. В окне журнала всегда отображается только второй фрагмент, даже в подпрограмме ChunkTransformer(), которая одновременно правильно отображает его в журнале консоли devtools.

Как я могу получить все мои ответные сообщения в виде одной строки? Это нормально, если фрагменты разделены квадратными скобками как отдельные возвращаемые значения, пока они отображаются в журнале. я думаю <p0>не отображается, потому что окно журнала считает, что это специальный символ. Он даже не будет отображаться здесь, пока я не заверну в тег кода. Так что я думаю, что у меня есть как минимум две проблемы.

async function connectServer() {
        try{         
            port = await navigator.serial.requestPort(); // prompt user to select device connected to a com port
            await port.open({ baudRate: 115200 });         // open the port at the proper supported baud rate

            // create a text encoder output stream and pipe the stream to port.writeable
            const encoder = new TextEncoderStream();
            outputDone = encoder.readable.pipeTo(port.writable);
            outputStream = encoder.writable;
            // send a CTRL-C and turn off the echo
            writeToStream('\x03', 'echo(false);');

            let decoder = new TextDecoderStream();
            inputDone = port.readable.pipeTo(decoder.writable);
            inputStream = decoder.readable
            // test why only getting the second chunk in the log
            .pipeThrough(new TransformStream(new ChunkTransformer()));
            
            // get a reader and start the non-blocking asynchronous read loop to read data from the stream.
            reader = inputStream.getReader();
            readLoop();
            return true;
        } catch (err) {
            console.log("User didn't select a port to connect to")
            return false;
        }
}

async function readLoop() {
    while (true) {
        const { value, done } = await reader.read();
        if (value) {
            displayLog(value);
        }
        if (done) {
            console.log('[readLoop] DONE'+done.toString());
            displayLog('[readLoop] DONE'+done.toString());
            reader.releaseLock();
            break;
        }
    }
}

class ChunkTransformer {
    transform(chunk, controller) {
        displayLog(chunk.toString()); // only shows last chunk!
        console.log('dumping the raw chunk', chunk); // shows all chunks
        controller.enqueue(chunk);
    }
}

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight"), duration: 1}, "fast");
}

Answer 1

Первый шаг: измените функцию displayLog() одним из следующих способов.

С Animate:

       function displayLog(data){
  $("#log-box").append("<br>"+data+"<br>");
  $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight")}, "fast");
}

Без Animate:

       function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").scrollTop( $("#log-box").prop("scrollHeight"));
}

ИЛИ Просто для вашего понимания:

       function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    scrollHeight =  $("#log-box").prop("scrollHeight");
    $("#log-box").scrollTop(scrollHeight);
}