js模拟打字机效果

通用方法定义

/**
 * 
 * @param {*} text 打字文本
 * @param {*} callback 完成打印效果回调
 * @param {*} timeout 完成打印效果多久回调
 */
export function textPrinter({ text, change, complete, timeout = 1000 }) {
    if (text) {
        const len = text.length;
        let count = 0;
        const interval = setInterval(() => {
            count++;
            if (count > len) {
                // 完成
                setTimeout(() => {
                    complete && complete()
                }, timeout)
                clearInterval(interval)
            } else {
                change && change(text.substring(0, count))
            }
        }, 60)
    } else {
        // 完成
        setTimeout(() => {
            complete && complete()
        }, timeout)
    }
}

方法调用

　　　　　　textPrinter({
              text: printText,
              change(text) {
                if (firstInput) return;
                placeholderText.value = text
              },
              complete() {
                count ++;
                loopFn()
              },
            })