如何通过“这个”？进入 setTimeout 回调

Question

css

.item {
  display: none;
}

html

<div>
  <div class="item">machin</div>
  <div class="item">chose</div>
  <div class="item">chouette</div>
  <div class="item">prout</div>
</div>

我正在使用 jQuery，我想让每个 .item 出现在一个随机的小计时器之后，例如：

javascript

$('.item').each(function () {
  itm = $(this);
  setTimeout(function () {
    itm.fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
})

这里 itm 将始终包含最后一项，因为该函数在所有赋值之后进行评估。
我无法使用 setTimeout() 的第三个参数，因为它在 IE 上不起作用。
出于安全原因，不建议将 setTimeout() 与 eval 方法一起使用。

那么如何通过 setTimeout() 访问我的对象呢？

---

编辑

我知道这个问题已经发布。
但我认为它与 each() 上下文略有具体。
现在有人完全改变了我的问题的标题，最初是这样的“setTimeout() - jQuery.each() 这个对象参数”

Answer 1

不要使用setTimeout，使用jQuery自带的工具。

$('.item').each(function () {
   $(this).delay(Math.random() * 1000).fadeIn();
})

http://api.jquery.com/delay/

工作示例：http://jsfiddle.net/qENhd/

Answer 2

创建/使用闭包：

$('.item').each(function () {
  var that = this;

  setTimeout(function () {
    $(that).fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
})

http://jibbering.com/faq/notes /closures/

https://developer.mozilla.org/en/JavaScript/Guide/Closures

Answer 3

在setTimeout执行之前，each循环已经完成执行，它不会等待。同样在 setTimeout 函数中 this 不会引用 DOM 元素。

尝试这样的事情。

function fadeItem(item){
   item.fadeIn(1000);
}

$('.item').each(function () {
  var $item = $(this);
  setTimeout(function () {
    fadeItem($item);
  }, Math.floor(Math.random() * 1000));
});

你也可以尝试这样的事情。

var $items = $('.item'), count = 0;

function fadeItem(item){
   item.fadeIn(1000);
    if(count < $items.length){
       setTimeout(function(){
            fadeItem($items.eq(count++));
       }, Math.floor(Math.random() * 1000));
    }
}
setTimeout(function(){
    fadeItem($items.eq(count++));
}, Math.floor(Math.random() * 1000));

Answer 4

您需要将 this 存储在单独的变量中：

$('.item').each(function () {
  var me = $(this);
  setTimeout(function () {
    me.fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
})

Answer 5

这里的技巧是将 this 保存到本地，可以在 setTimeout 回调中安全地进行评估

$('.item').each(function () {
  var self = this;
  setTimeout(function () {
    $(self).fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
});

Answer 6

试试这个：

$('.item').each(function () {
 var myVar = $(this);
setTimeout(function () {
myVar.fadeIn(1000);
}, Math.floor(Math.random() * 1000));
})

Answer 7

尝试一下这个：

    $('.item').each(function () {
        var elm = this;
      setTimeout(function () {
        $(elm).fadeIn(1000);
      }, Math.floor(Math.random() * 1000));
    })

我无法解释它为什么有效，但我认为这是对 setTimeout 中另一个“this”的引用。

http://jsfiddle.net/Pdrfz/

Answer 8

试试这个：

 $('.item').each(function () {
    var item =$(this);
    setTimeout(function () {
            item.fadeIn(1000);
        },
        Math.floor(Math.random() * 1000));
   });