我试图通过改变宽度来隐藏数组中的所有元素。在函数内部使用了 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 loop is going through array and removing text from elements and then hiding them by changing width inside setInterval until zero. Unfortunately it only makes last element in array hide close correctly.

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

请注意，更好的想法（恕我直言）是将 class 添加到数组元素并让 CSS 处理动画

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

I'm trying to hide all elements inside the array by changing width. Used setInterval inside function but it only runs correctly for the last element

javascript

for-loop

setinterval