前端实现逐字展示效果

杨了仰头

已于 2024-04-08 17:49:56 修改

阅读量613

点赞数 2

文章标签： vue.js 前端 typescript javascript react

于 2024-04-01 16:53:35 首次发布

本文链接：https://blog.csdn.net/weixin_59769277/article/details/137238643

版权

文章介绍了如何在Vue3中利用`setTimeout`和在React中利用`setInterval`实现逐字显示文本的功能，展示了两种不同的前端框架实现逐字显示字符串的方法。

摘要由CSDN通过智能技术生成

AI🔥了，发现了一个有点意思的东西，就是逐字展示，以下就是它的实现方式

vue3+ts实现

一、`setTimeout`

<template>
  <div>
    <button @click="startDisplayStr">逐字展示</button><br />
    <p>{{ displayedText }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const streamList = ref(['首先需要避免暴饮暴食，尽量保持规律的饮食习惯，避免过度饥饿或过饱。', '其次，应避免摄入过多油腻食物和高脂肪食物，以免加重胰腺负担。', '此外，还应注意控制饮酒量，避免酒精对胰腺的损害。'])
const currIndex = ref(0)
const displayedText = ref('') // 正在显示的文字
let timer: number | null = null

const startDisplayStr = () => {
  if (timer) {
    clearTimeout(timer!)
  }
  // 将数组中的字符串拼接起来
  const res = streamList.value.join('')
  if (currIndex.value < res.length) {
    displayedText.value += res[currIndex.value]
    currIndex.value++
    setTimeout(startDisplayStr, 200)
  } else {
    clearTimeout(timer!)
    timer = null
  }
}
</script>

<style scoped></style>

二、`setInterval`

<template>
  <div>
    <button @click="getStream">逐字展示</button><br />
    <p>{{ displayedText }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const streamList = ref(['首先需要避免暴饮暴食，尽量保持规律的饮食习惯，避免过度饥饿或过饱。', '其次，应避免摄入过多油腻食物和高脂肪食物，以免加重胰腺负担。', '此外，还应注意控制饮酒量，避免酒精对胰腺的损害。'])
const currIndex = ref(0)
const displayedText = ref('') // 正在显示的文字
let timer: number | null = null
const getStream = () => {
    timer = setInterval(displayAnswer, 200)
  })
}
const displayAnswer = () => {
  const text = streamList.value.join('')
  displayedText.value += text[currIndex.value]
  currIndex.value++
  if (currIndex.value == text.length) {
    clearInterval(timer!)
    timer = null
  }
}

</script>

<style scoped></style>

react+js

`setInterval`

import { useState, useRef, useEffect } from 'react';
import { Button } from 'antd';

const Xiaoan = () => {
  const [stream, setStream] = useState('') 
  const [answerOutput, setAnswerOutput] = useState('') // 正在显示的文字
  const typingRef = useRef(null); // 使用ref来存储定时器ID
  const [isShowing, setIsShowing] = useState(false); // 是否开始展示
  const start = () => {
     setStream('这是一条测试语句')
     setIsShowing(true)
  }

  // 逐字展示答案
  const timeoutTextHandle = (callback) => {
    let currIndex = 0
    const chars = stream.split('')
    const timer = setInterval(() => {
      if (currIndex < chars.length) {
        setAnswerOutput(prev => prev + chars[currIndex])
        callback(chars[currIndex]) // 每增加一个字符调用回调，将当前的字符传给回调函数
        currIndex++
      } else { 
        clearInterval(timer)
        setIsShowing(false)
      }
    }, 200)
    typingRef.current = timer
  }
  useEffect(() => {
    // 监听变量，触发函数
    if (isShowing && stream) {
      let fullChar = ''
      history.current.push({type: 'ai', message: ''})
      timeoutTextHandle(char => {
        fullChar += char
        let index = history.current.length - 1
        history.current[index]['message'] = fullChar
      })
    }
    return () => {
      // 组件卸载时，清除定时器
      if (typingRef.current) {  
        clearInterval(typingRef.current);  
      }  
    };  
  }, [isShowing, stream])
  return (
    <div>
      <Button onClick={start}>开始</Button>
      <div>展示：{answerOutput}</div> 
    </div>
  )
}

export default Xiaoan