javascript - 使用 javascript 在 settimeout 中为 img 添加类

Question

我有这个 for 循环，我正在创建一堆图像用作“表情符号雨”

var icons = ['balloon', 
             'clapping-hands-light-skin-tone', 
             'clapping-hands-medium-skin-tone', 
             'crazy-face', 
             'face-blowing-a-kiss', 
             'grinning-face-with-smiling-eyes', 
             'heart-suit',
             'money-bag',
             'man-dancing',
             'money-mouth-face',
             'money-with-wings',
             'party-popper',
             'victory-hand-light-skin-tone',
             'victory-hand-medium-dark-skin-tone',
             'woman-dancing'];

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

            left = (Math.random() * (document.querySelector('#site').offsetWidth) - 75);
            top = parseInt(Math.random() * (i * 125));

            img = document.createElement("img");
            img.src = 'src/public/icons/rain/'+ icons[i] +'.svg';
            img.style.left = left +'px';
            img.style.top = top +'px';
            img.style.position = 'absolute';

            rainElement.appendChild(img);
    }

我想要的是使用 setTimeout 添加“fall”类，以便图标在不同时间开始下落。

我有这个

(function(i) { 

   setTimeout(function() {

   img.addClass('fall');

  }, i*750);
 })(i);
}

但这只会将“fall”添加到最后一个元素。我不知道如何在所有图像上执行此操作。

Answer 1

我不会将 setTimeout 放入循环中，而是创建一个外部函数，例如:

function fall(i) {
  return function(){
    setTimeout(function(){ 
        img.addClass('fall');
    }, i * 750);
  }
}

并在循环内:

fall(i)();

匿名异步函数(在本例中为 setTimeout)会将 i 的值绑定(bind)到函数外部的同一变量，然后您将只将该类添加到循环的最后一个元素。相反，您想要的是将其绑定(bind)到一个在循环中不会更改的值，这是实现此目的的一种方法。