使用setInterval定时器实现文字一个一个的打印在页面中

前言:

        项目需求实现请求回来的数据一个一个的打印在页面中,点击“停止生成”暂停打印;该功能需求类似于文心一言。

代码实现:

 view页面代码:

使用setInterval定时器实现文字一个一个的打印在页面中_第1张图片

script代码:

使用setInterval定时器实现文字一个一个的打印在页面中_第2张图片

 核心代码:

let k = 0;
timer = setInterval(() => {
    if (k >= props.answer.text.length) return clearInterval(timer);
    data.content += props.answer.text[k];
    k++;
}, 100);

//停止生成
function stopTimer() {
  nextTick(()=>{
      data.button_value = "已停止生成"
  }) 
 clearInterval(timer);
}

 

你可能感兴趣的:(前端)