纯JS递归实现淡入效果：为何代码无法逐步修改opacity值？

核心问题 #

你的代码里setTimeout的调用方式错误，导致递归函数瞬间执行完毕，没有产生预期的延迟渐变效果。

具体来说，这行代码：

setTimeout(fadeIn(arg_idElemHtml,arg_opacityValue), 400);

会立即执行fadeIn(arg_idElemHtml,arg_opacityValue)，然后把该函数的返回值（这里是undefined）传给setTimeout，相当于执行了setTimeout(undefined, 400)。递归调用会在一瞬间连续触发，直到arg_opacityValue >= 1，所以元素的opacity直接从0跳到1，看不到逐步变化的过程。

修正方案 #

需要把函数调用包装成匿名函数（或箭头函数），让setTimeout在延迟后才执行目标函数：

修正后的JavaScript代码

function fadeIn(arg_idElemHtml, arg_opacityValue) {
    if (arg_opacityValue < 1) {
        var objHtml = document.getElementById(arg_idElemHtml);
        objHtml.style.display = 'block';
        objHtml.style.opacity = arg_opacityValue + 0.1;
        arg_opacityValue = parseFloat(arg_opacityValue) + 0.1;
        // 用匿名函数包裹，确保延迟后才调用递归
        setTimeout(function() {
            fadeIn(arg_idElemHtml, arg_opacityValue);
        }, 400);
    }
}

或者用更简洁的箭头函数写法：

function fadeIn(arg_idElemHtml, arg_opacityValue) {
    if (arg_opacityValue < 1) {
        var objHtml = document.getElementById(arg_idElemHtml);
        objHtml.style.display = 'block';
        objHtml.style.opacity = arg_opacityValue + 0.1;
        arg_opacityValue = parseFloat(arg_opacityValue) + 0.1;
        setTimeout(() => fadeIn(arg_idElemHtml, arg_opacityValue), 400);
    }
}

额外优化建议 #

可以把DOM元素的查找逻辑移到函数外部，避免每次递归都重复查询DOM，提升性能：

function fadeIn(arg_idElemHtml, arg_opacityValue) {
    var objHtml = document.getElementById(arg_idElemHtml);
    if (arg_opacityValue < 1) {
        objHtml.style.display = 'block';
        objHtml.style.opacity = arg_opacityValue + 0.1;
        arg_opacityValue = parseFloat(arg_opacityValue) + 0.1;
        setTimeout(() => fadeIn(arg_idElemHtml, arg_opacityValue), 400);
    }
}

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