为什么js的setInterval函数里无法引用外围的变量？

run（）函数里的if语句的条件报错了：

   Uncaught TypeError: Cannot read properties of undefined (reading 'style')

请问如何修改才能让i变量可以在if里起作用？

var ulpainshop = document.querySelectorAll('.ulpainshop');

var opacity = 0;
 


//二级菜单持续显示
console.log("js已执行"); 



function screenmove(){
    console.log("鼠标移入执行");
   
    var i = 0;    
}
     

  
//通用的文字出现动画
 

function textAnimationStart(name){
    this.name = name;
    console.log("动画已执行"); 
    var i =0;
   name[i].style.visibility = "visible";
    while(i<3){
        console.log("a步骤"); 
        var timer = null;
        timer = setInterval(run,20);
        name[i].style.opacity = opacity;
        
        function run(){


            
    
            if (name[i].style.opacity == 1) {         /*这里的style报错了，我手动把i换成0的时候就不会报错*/
                console.log("结束");
                clearInterval(timer);
               
                
            } else {
                console.log("c步骤");
                opacity = opacity + 0.05;
                }
            
            }

       
                i++;
    }
   
}

申明i的语句 var i =0; 放最外边，或者调用run的时候传进去 run(i,20)这样

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以看下这个问题的回答https://ask.csdn.net/questions/776777
• 这篇博客也不错, 你可以看下清除JS定时器setInterval方法防止if条件语句判断无效的解决方案

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^