javascript - 使用函数的局部变量和 setTimeout

Question

我在构建的网站中遇到了障碍。我有一个将特定类添加到不同 ID 的函数。最终结果是让主页上的图像一次淡出一个。我使用局部变量 a 以便我可以轻松地编写不同的 id，而无需编写 3 个单独的函数。但是我在使用 setTimeout 时遇到了问题。我似乎根本无法让 setTimeout 工作。任何帮助将不胜感激。这些类毫无问题地添加到 ID，我只是在使用 setTimeout 函数时遇到了问题。我使用了在这里看到的多种方法，但我并不真正理解它们。任何帮助将不胜感激。这是我的代码:

window.onload;

var fetchOne =document.getElementById('picOne');
console.log(fetchOne);

var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');

function AttachClass (a){
    
    a.className ='opacity';
    
}

setTimeout(AttachClass.bind(null,a),8000);

AttachClass (fetchOne);

AttachClass (fetchTwo);

AttachClass (fetchThree);

#picOne{
    
    opacity: 1;
    
    transition: opacity 2s ease-in-out
    
    
}

#picOne.opacity{
    opacity: 0;
    
    
    
}

#picTwo{
    opacity: 1;
    z-index: -1;
    transition: opacity 2s ease-in-out
    
    
}

#picTwo.opacity{
    opacity: 0;
    
}

#picThree{
   opacity: 1;
    z-index: -2;
    

    transition: opacity 2s ease-in-out
}

#picThree.opacity{
    opacity: 0;
   
    
}

<div class="landscape_pics">
        
        <img id="picOne" src="media/Photographs/BK3U8791.JPG">
        <img id="picTwo" src="media/Photographs/2014Feb%20-%20Vacation%20-%20Sao%20Paulo%20-%200071a.jpg">
        <img id="picThree" src="media/Photographs/2014Aug06%20-%20Stadium%20-%20001.JPG">
        
        
    </div>

Answer 1

您只为具有该超时的 1 个图像设置 1 个处理程序和 a从未在您粘贴的代码中定义，因此 setTimeout行不通。

为了让它们分别淡出，您需要创建一个 setTimeout每张你想要褪色的图片。

for (var i = 0; i < images.length; i++) {
    setTimeout(AttachClass.bind(null, images[i]), 2000);
}

其次，window.onload似乎是某些东西的残余，您可以安全地将其删除。

第三，不需要调用函数AttachClass在你设置了 setTimeout 之后因为它现在由 setTimeout 处理.

现在您只需要将查询 DOM 的图像粘贴到一个名为 images 的数组中然后你就可以走了。

看起来像这样

var fetchOne = document.getElementById('picOne');
var fetchTwo = document.getElementById('picTwo');
var fetchThree = document.getElementById('picThree');

function AttachClass(a) {
    a.classList.add('opacity'); // IE10+ support only
};

let images = [fetchOne, fetchTwo, fetchThree];

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 5000);
}

如果您想进一步完善它，您可以在所有图像上添加一个类。我选择了类名 pic ，在 DOM 中查询该类名，然后设置上述超时。

var images = document.getElementsByClassName('pic');

function AttachClass(a) {
  a.classList.add('opacity'); 
}

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 1000);
}

JSBIN here给你玩!快乐的黑客!