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