在 settimeout 中使用 javascript 在 img 上添加类答案

【问题标题】：Add class on img in settimeout with javascript在 settimeout 中使用 javascript 在 img 上添加类
【发布时间】：2017-07-13 12:15:53
【问题描述】：

我有这个 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”添加到最后一个元素。我无法弄清楚如何在所有图像上执行此操作。

【问题讨论】：

标签： javascript html arrays for-loop settimeout

【解决方案1】：

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

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

在循环内：

fall(i)();

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

【讨论】：