传入方法的字符串首次循环后变为undefined类型的原因及解决办法

问题原因 #

第一次调用typeEffect时传入了字符串参数，但在setTimeout里调用函数时没有传递任何参数，导致后续执行时printedText变成undefined，触发类型判断分支后函数直接退出，无法完成完整的打字效果。

修复后的代码 #

const headingUpper = "Hello";
const speed = 50; // speed milleseconds
let count = 0;
let printedText;

typeEffect(headingUpper, "headingUpper");

function typeEffect(printedText, target) {
    if ((typeof printedText) === ("string")) {
        if (count < printedText.length) {
            document.getElementById(target).innerHTML += printedText.charAt(count);
            count++;
            // 方式1：用箭头函数包裹，传递参数（兼容性更好）
            setTimeout(() => typeEffect(printedText, target), speed);
            // 方式2：直接在setTimeout后追加参数（现代浏览器兼容）
            // setTimeout(typeEffect, speed, printedText, target);
        }
    }
}

补充说明 #

• 方式1的箭头函数包裹写法适配所有浏览器环境；
• 方式2利用setTimeout的后续参数作为回调入参，现代浏览器支持但旧版IE不兼容。

内容的提问来源于stack exchange，提问作者SoSages