javascript - 在终端中产生动画打字效果

Question

有像 typewriterjs 和 typeitjs 这样的库可以在 DOM 中产生动画打字效果。如何在终端中产生类似的效果。我找到的最接近的选项是终端套件，但是当 cli 应用程序必须在效果完成后立即进行输入时，它会给我带来问题。下一个输入是添加不需要的字符，我似乎无法找到解决它的方法(请参阅下面的 gif)。

这就是我使用终端套件产生这种效果的方式。如果有人能告诉我为什么在效果完成后下一个输入没有被正确注册，那将会很有帮助。

const repl = require('repl');
const socket = require('socket.io-client')('http://localhost:3000');
const term = require('terminal-kit').terminal;

socket.on('connect', function() {
  console.log('Server connected');
});

// typing effect on receiving a message
socket.on('msg', function(data) {
  term.slowTyping(
    data, {
      flashStyle: false,
      delay: 115,
      style: term.yellow
    },
    function() {
      return takeInput();
    }
  );
});

socket.on('disconnect', function() {
  console.log('Server disconnected');
});

function takeInput() {
  console.log('');
  repl.start({
    prompt: '> ',
    eval: (message) => {
      socket.emit('msg', message);
    }
  });
}

takeInput();

Answer 1

出现问题是因为此时两次调用 takeInput已经制作(最后一行的那个和来自 slowTyping 的回调的那个)，这意味着两个 repl 服务器已经启动并且它们都同时接收输入，这解释了输入的重复。情况会变得更糟，因为在下一条消息时，三个 repl 服务器将同时处于事件状态，并且在每条消息之后将创建更多服务器。takeInput应该跟踪它创建的 repl 服务器，并且应该确保在任何时候都只存在一个。当takeInput被调用时，它应该销毁任何先前的输入字段并创建一个新的输入字段。我不知道如何取消一个 repl 服务器，我认为你不应该首先使用它，因为终端套件已经提供了一个更好的选择: inputField .

let currentInput = null;                                  // the current prompt
function takeInput() {
  if(currentInput) {                                      // if there is already an input field
    currentInput.abort();                                 // cancel it
  }

  term('\n> ');
  currentInput = term.inputField((err, message) => {      // create a new input field and assign it to currentInput
    // handle err
    
    socket.emit('msg', message);                          // post the message (maybe check if it's not empty first)
    takeInput();                                          // and prompt for a new input
  });
}