Javascript 不透明度样式不'；不能在回调Java脚本中工作？

调用指定的eventlistener函数fade（）后，循环工作正常，但控制台显示，当值更改时，不透明度不会修改。我做错了什么

function fade(element) {

    var easeIn = 0.01;
    var easeOut = 0.01;

    for (alpha = 1; alpha >= 0.2 ; alpha -= easeIn){
        element.target.style.opacity = String(alpha);
        console.log(alpha, element.target);
    }

    for (alpha = 0.2; alpha <= 1 ; alpha += easeOut){
        element.target.style.opacity = alpha;
        console.log(alpha, element.target);
    }    
}

功能衰减（元素）{
var-easeIn=0.01；
var easeOut=0.01；
对于（alpha=1；alpha>=0.2；alpha-=easeIn）{
element.target.style.opacity=字符串（alpha）；
console.log（alpha，element.target）；
}
对于（alpha=0.2；alpha您的循环同步运行，浏览器批处理样式发生更改-只有在所有Javascript完成后，显示才会更新，到那时，不透明度将恢复为1，因此从视觉上看，不会出现任何更改

在循环中添加一个小延迟：


constdelay=ms=>newpromise（res=>setTimeout（res，ms））；
异步函数（元素）{
var-easeIn=0.01；
var easeOut=0.01；
对于（alpha=1；alpha>=0.2；alpha-=easeIn）{
element.style.opacity=字符串（alpha）；
等待延迟（20）；
}
对于（α=0.2；α{
凋谢（榆树）；
})；
点击
清澈如水，感谢您对命名的建议。是否有可能避免延迟？我的目的是让两个循环100%开始和结束，而不管其他事件如何。淡出/淡出的视觉延迟（不管是由JS还是CSS引起的）是绝对必要的，否则用户将看不到淡入淡出效果。我明白了。非常感谢您的帮助。我认为您需要为文档中发生的每个事件创建一个对象，因为它们相互中断，因此淡入淡出不会独立于创建的其他事件工作。可能是：对于每个事件，创建一个类并创建一个对象是很方便的，问题是<代码> Alpha < /代码>是隐式的全局。考虑使用严格的模式来避免这些问题-在使用之前总是声明变量。好吧，看，你太棒了。