如何实现jQuery Terminal仿MacOS终端回车提示框闪隐效果并修复异常消失问题

问题说明 #

开发jQuery Terminal时，希望实现MacOS终端的效果：按下回车键后提示框短暂消失再快速重现。现有代码能实现基础效果，但快速连续按回车或长按回车时，提示框会完全消失，尝试过长按检测方案未彻底解决。

原代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
$('body').terminal({
    echo: function(...args) {
        this.echo(args.join(" "))
    }
}, {

keydown: function(e) {
    
    if(e.key === 'Enter' || e.keyCode === 13) {
         
    var checkit = this.get_prompt();
         
                setTimeout(() => {
                    this.set_prompt('')         
                }, 10);
         
                setTimeout(() => {
                    this.set_prompt(checkit)
                }, 200);
  
}   else {
             
    }
},
    greetings: '',
    checkArity: false,
    prompt: 'MyNormalPrompt>'
    
});
</script>
</body>
</html>

问题根源 #

原代码使用两个独立的setTimeout处理提示框的隐藏和恢复，快速连续触发回车时，多个异步定时器会叠加执行，导致后续的恢复操作被覆盖，最终提示框无法正常显示。

修复方案 #

通过引入定时器变量，每次触发回车时清除之前的定时器，确保同一时间只有一组隐藏/恢复流程在执行：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
let promptTimer; // 存储定时器ID，避免多任务冲突
$('body').terminal({
    echo: function(...args) {
        this.echo(args.join(" "))
    }
}, {
    keydown: function(e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            const terminal = this;
            const originalPrompt = terminal.get_prompt();
            
            // 清除之前未执行的定时器，避免叠加
            clearTimeout(promptTimer);
            
            // 立即隐藏提示框
            terminal.set_prompt('');
            
            // 固定延迟后恢复提示框
            promptTimer = setTimeout(() => {
                terminal.set_prompt(originalPrompt);
            }, 200);
        }
    },
    greetings: '',
    checkArity: false,
    prompt: 'MyNormalPrompt>'
});
</script>
</body>
</html>

关键优化点 #

• 新增promptTimer变量，每次触发回车时先清除之前的定时器，防止多个异步操作互相干扰。
• 移除不必要的10ms延迟，直接隐藏提示框，更贴近原生终端的即时反馈。
• 确保每次回车操作仅触发一次提示框的隐藏和恢复流程，彻底解决快速连续按或长按回车时的异常问题。

内容的提问来源于stack exchange，提问作者NotHim