Question

您好我有以下javascript代码

closeAllOtherAkkordeons = (excludeNumber) => {
        for (i = 1; i < 16; i++) {
            if (i != excludeNumber) {
                facebook = document.getElementById("facebook" + i)


                //here is the probleme
                setTimeout(() => {facebook.style.display = "none"; console.log(facebook)}, 500)

            }
        }
    }

问题是所有setTimeout都与id =“facebook15”一起使用尽管他们用facebook [1-15]

打电话

我该怎么做才能防止这种情况发生？感谢大家：）

Answer 1

您可以将变量传递给setTimeout()

var facebook = document.getElementById("facebook" + i);
setTimeout((fb) => {fb.style.display = "none"; console.log(fb)}, 500 * i, facebook)

Answer 2

看起来facebook值在某个地方的循环之外声明，因为我在你的代码段中看不到它。由于它在循环范围之外，因此它会在任何setTimeout代码运行之前更新为最后一个值。您可能希望在循环内声明它，以便在循环迭代时其值不会发生变化。 EG：

const facebook = document.getElementById("facebook" + i);

这是一个展示差异的片段：

＆＃13;

let outerVar;
for (let i = 0; i < 3; i++) {
    outerVar = i;
    setTimeout(() => console.log("Outer", outerVar), 0);
}

for (let i = 0; i < 3; i++) {
    const outerVar = i; // Here, we are shadowing the 'outerVar'. You could give it a different name if you wanted to avoid the shadowing.
    setTimeout(() => console.log("Inner", outerVar), 0);
}

＆＃13;

Answer 3

tf.data.Dataset声明超出facebook的范围（无closeAllOtherAkkordeons，var或const将其附加到全局范围），然后通过引用传递到let。

如果在for中声明变量，它将解决您的问题。

setTimeout

Answer 4

您可以使用IIFE模式（请注意，为了使用IIFE，您必须在其上方的行末尾添加分号。

closeAllOtherAkkordeons = (excludeNumber) => {
    for (i = 1; i < 16; i++) {
        if (i != excludeNumber) {
            var facebook = document.getElementById("facebook" + i);
            (function wrapper(j){
                setTimeout(() => {j.style.display = "none"; console.log(j)}, 500)
            })(facebook)
        }
    }
}

Answer 5

您可以像这样在for循环外定义一个函数。这是一个例子。

＆＃13;

closeAllOtherAkkordeons = (excludeNumber) => {
  for (let i = 1; i < 7; i++) {
      if (i != excludeNumber) { 
        displayFacebook(i);

      }
  }
}

function displayFacebook(i) {
    var facebook = document.getElementById("facebook" + i);
    setTimeout(() => {facebook.style.display = "none"; console.log(facebook)}, 500);
 
}
closeAllOtherAkkordeons(2);

＆＃13;

<div id= "facebook1"></div>
<div id= "facebook2"></div>
<div id= "facebook3"></div>
<div id= "facebook4"></div>
<div id= "facebook5"></div>
<div id= "facebook6"></div>

＆＃13;

如何在循环中使用setTimeout（）并维护变量值？

5 个答案: