Question

我想逐个淡入4个div框。在css中，它们的不透明度为=。

这是我的JavaScript代码：

function fadeIn() {
    var box = new Array(
        document.getElementById('skill1'),
        document.getElementById('skill2'),
        document.getElementById('skill3'),
        document.getElementById('skill4')
    );

    var pagePosition = window.pageYOffset;

    if (pagePosition >= 1000) {
        for (var i = 0; i < box.length; i++) {
            setTimeout(function(i) {
                box[i].style.opacity = "1";
            }, i * 500);
        }
    }
}

好吧，如果你将页面滚动到1000px的位置并在body-tag中调用，函数必须启动：

没有setTimeout它可以工作，但是使用此功能，控制台会说：

Uncaught TypeError: Cannot read property 'style' of undefined

我是初学者，想要了解JS，所以请不要使用jQuery提供答案。

Answer 1

当您的超时运行时，循环已完成处理，因此i将始终是最后一次迭代。你需要一个闭包：

for(var i = 0; i < box.length; i++) {
  (function(index) {
    setTimeout(function() {
        box[index].style.opacity = "1";
    }, index*500);
  })(i)
}

Answer 2

问题在于范围。当匿名函数在超时i内执行时，变量在迭代中具有i的最后一个值。有两种解决方案：

1）使用IIFE：

for (var i = 0; i < box.length; i++) {
  (function (i) {
    setTimeout(function (i) {
      box[i].style.opacity = "1";
    }, i * 500);
  })(i);
}

＆＃13;

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);//prints out 0 1 2 3 4
    }, i * 500)
  })(i);
}

＆＃13;

2）使用let：

 for (let i = 0; i < box.length; i++) {

    setTimeout(function (i) {
        box[i].style.opacity = "1";
    }, i * 500);
}

＆＃13;

"use strict";
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, i * 500)
}

＆＃13;

let语句可选地声明一个块作用域局部变量将其初始化为一个值。

请记住let是ecmaScript 6的功能。

setTimeout无效JavaScript“样式未定义”

2 个答案: