改变不透明度的递归函数（纯js实现淡入淡出效果）

Question

为什么这段代码没有改变正在进行的不透明度值？

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);
    }
}

#msg {background-color:red;display:none;opacity:0.0}

<button id="bt" onclick="fadeIn('msg',0);">GO</button>
<div id="msg">content message</div>

Answer 1

那是因为

setTimeout

不包括回调函数。

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);
    }
}

#msg {background-color:red;display:none;opacity:0.0}

<button id="bt" onclick="fadeIn('msg',0);">GO</button>
<div id="msg">content message</div>