网页实现打字机效果

在DS中，AI与用户的对话呈现的是一个打字机效果，那么我们在网页中如何实现对话框的打字机效果呢

思路：进行字符串拼接，将要拼接的字符串逐字拼接到目标字符串

上代码

/**
 * 实现打字机效果
 * @param {String} str 要打印的字符串
 * @param {Array} arr 聊天数据中的数组
 * @param {Number} id 需要push字符串的下标
 * @param {String} msg_name 数组中的对象名
 * @param {Number} time 打印速度
 */
const gradually_add = (str, arr, id, msg_name, time = 10) => {
    return new Promise((resolve, reject) => {
        let temporary_counter = 0; // 初始化计数器

        const addNextChar = () => {
            if (temporary_counter < str.length) {
                setTimeout(() => {
                    arr[id][msg_name] += str[temporary_counter]; // 添加字符
                    temporary_counter += 1; // 计数器递增
                    addNextChar(); // 递归调用
                }, time);
            } else {
                temporary_counter = 0; // 重置计数器
                resolve(); // 所有字符添加完成，resolve
            }
        };

        addNextChar(); // 开始递归
    });
}

给一个默认打字时间，可以自己选择打印间隔的长短

该功能是在聊天室样式中使用的