for循环内使用setTimeout[JS]

在一个for循环内,需要实现一个延时执行时,通常想到的是使用setTimeout,但是实际效果未能如愿。

let eles=document.querySelectorAll(".test");
for(var i=0;i<eles.length;i++){
    eles[i].style.cssText+="transition:all .4s ease-in-out;opacity:0;top:0;";
    window.setTimeout(function(){
        eles[i].remove();
    },500)}

原本想实现的是,给窗口添加一个过度动画,在动画完成后关闭该窗口。可从实际运行结果来看,setTimeout内的代码不会执行,如果将时间调小则可是运行setTimeout内的代码,但是会报错。

解决办法

办法就是在setTimeout外嵌套一个函数:

let eles=document.querySelectorAll(".test");
let _fun=function(ele){
    window.setTimeout(function(){ele.remove();},500);
}
for(var i=0;i<eles.length;i++){
    eles[i].style.cssText+="transition:all .4s ease-in-out;opacity:0;top:0;";
    _fun(eles[i]);
}

发表于:2019-10-09