在实现基本功能后开始优化前端功能体现
为了更符合ai对话的特征,参照了市面上多种语言模型,添加了打字机效果
代码:
在实现打字机效果的中途,发现无论怎么更改,都会一次性输出所有文字,添加断点和使用console.log打印后发现,在控制台是逐字输出但在页面显示是一次性输出
在查找相关资料后发现是浏览器渲染优化的原因,无法使用setTimeout(typeWriter, speed);方法,所以改为使用请求动画帧(requestAnimationFrame
)确保逐字渲染
在实现基本功能后开始优化前端功能体现
为了更符合ai对话的特征,参照了市面上多种语言模型,添加了打字机效果
代码:
在实现打字机效果的中途,发现无论怎么更改,都会一次性输出所有文字,添加断点和使用console.log打印后发现,在控制台是逐字输出但在页面显示是一次性输出
在查找相关资料后发现是浏览器渲染优化的原因,无法使用setTimeout(typeWriter, speed);方法,所以改为使用请求动画帧(requestAnimationFrame
)确保逐字渲染