Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/393.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在终端中生成动画打字效果_Javascript_Node.js - Fatal编程技术网

Javascript 在终端中生成动画打字效果

Javascript 在终端中生成动画打字效果,javascript,node.js,Javascript,Node.js,有像typewriterjs和typeitjs这样的库,用于在DOM中生成动画类型效果。如何在终端中产生类似的效果。我找到的最接近的选项是terminal kit,但当cli应用程序必须在效果完成后进行输入时,它会给我带来问题。下一个输入是添加不需要的字符,我似乎找不到解决方法(请参阅下面的gif) 这就是我使用终端套件产生这种效果的方式。如果有人能告诉我为什么在效果完成后下一个输入没有被正确注册,这将是很有帮助的 const repl=require('repl'); const socke

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

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

const repl=require('repl');
const socket=require('socket.io client')('http://localhost:3000');
const term=require('terminal-kit')。终端;
socket.on('connect',function(){
log('Server connected');
});
//输入对接收消息的影响
socket.on('msg',函数(数据){
术语.慢速打字(
数据{
flashStyle:false,
延误:115,
款式:term.yellow
},
函数(){
返回takeInput();
}
);
});
socket.on('disconnect',function()){
log('服务器断开连接');
});
函数takeInput(){
控制台日志(“”);
答复:开始({
提示:“>”,
评估:(消息)=>{
发出('msg',消息);
}
});
}
takeInput();

出现问题的原因是,在这一点上,对
takeInput
进行了两次调用(最后一行调用了一次,从
slowTyping的回调调用了一次),这意味着两个repl服务器已经启动,并且它们都同时接受输入,这解释了输入的重复。这将变得更糟,因为在下一条消息之前,三个repl服务器将同时处于活动状态,并且在每条消息之后将创建更多的repl服务器

takeInput
应该跟踪它创建的repl服务器,并且应该确保在任何时候都只存在一个。调用
takeInput
时,它应该销毁以前的所有输入字段并创建一个新字段。我不知道如何取消repl服务器,而且我认为您不应该首先使用它,因为终端套件已经提供了更好的选择:


好吧,这就解释了。非常感谢。顺便说一句,takeInput()应该在函数体外部调用,而不是递归地以输入提示符开始,这应该保持在那里。回调中的一个用于连续消息传递,这意味着用户发布消息后,会提示输入新消息。应该有三个
takeInput
调用,一个在
slowTyping
的回调中,一个在
takeInput
的回调中,一个在脚本底部
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
  });
}