我试图通过更改宽度来隐藏数组中的所有元素。在函数中使用了setInterval，但它只对最后一个元素正确运行

Question

function removeElements(){
var t;
var x = 0;
var s;
for(i=0; i <removeArray.length; i++){
t = document.getElementById(removeArray[i]);
t.innerHTML = "";
s = parseInt(t.style.width, 10);
var int = setInterval(function() {
if (s <= x) { 
clearInterval(int); 
return;  } 
else { 
s-=2; 
t.style.width = s + "px";
}
}, 2);
}}

For循环遍历数组，从元素中删除文本，然后通过更改setInterval内部的宽度将其隐藏，直到为零。不幸的是，它只会使数组中的最后一个元素正确地隐藏关闭。

Answer 1

我认为这是因为您在循环之外声明了t和s(我可以添加x，但您永远不会更新它的值，所以这无关紧要(。setInterval内部的回调函数在循环结束时执行(无论removeArray的大小或延迟如何(，因此在执行时t总是最后一个元素document.getElementById(removeArray[removeArray.length - 1])

您可以使用let和const在循环中声明t和s。

function removeElements() {
// var t;
var x = 0;
// var s;
for (let i = 0; i < removeArray.length; i++) {
const t = document.getElementById(removeArray[i]);
t.innerHTML = "";
let s = parseInt(t.style.width, 10);
let int = setInterval(function() {
if (s <= x) {
clearInterval(int);
return;
} else {
s -= 2;
t.style.width = s + "px";
}
}, 2);
}
}

请注意，一个更好的想法(IMHO(是在数组元素中添加一个类，并让CSS处理动画