javascript streamreader仅在log-box.append中显示第二个块

我正在努力学习JQuery/Javascript，并拥有一个使用chrome实验性web串行API的web应用程序。当我输入一个命令并得到一个响应时，这个字符串在一个随机位置被分成两部分，通常在前三分之一处：

所有其他返回消息都较短，并用括号括起来

在下面的代码中。日志窗口仅显示第二个区块，即使在ChunkTransformer例程中，该例程同时在devtools控制台日志中正确显示第二个区块

如何使所有返回消息显示为一个字符串？只要数据块显示在日志中，就可以通过括号将它们分割为单独的返回值。我认为没有显示，因为日志窗口认为它是一个特殊字符。它甚至不会显示在这里，直到我包装在一个代码标签。所以我想我至少有两个问题

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");
}

第一步： 通过以下方式之一修改displayLog函数

使用动画：

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

没有动画：

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);
}

---

您正在从该文本生成html，它被识别为p0元素的开始标记。改用.text方法。啊，谢谢你的区别。我不知道如何使用.text，但尝试了这个方法，效果很好！现在我只需要弄清楚如何在长度超过几个字符的行之间不出现奇数分隔：$log-box.appenddocument.createTextNodedata$log-box.append；