Cómo pasar 'esto' en una devolución de llamada 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> 

estoy usando jQuery y me gustaría hacer de cada .item que aparece después de una pequeño temporizador aleatorio como:

javascript

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

Aquí itm contendrá siempre el último elemento ya que la función se evalúa después de todas las tareas. No puedo usar el 3er parámetro de setTimeout() porque no funcionará en IE.
No se recomienda utilizar setTimeout() con el método eval por razones de seguridad.

Entonces, ¿cómo puedo acceder a mi objeto a través de setTimeout()?

---

Editar

Sé que esta pregunta ya se han publicado.
Pero pensé que era un poco específico con el contexto each().
Ahora alguien ha cambiado por completo el título de mi pregunta que originalmente era algo así como 'setTimeout() - jQuery.each() este parámetro objeto'

Answer 1

No utilice setTimeout, use las propias herramientas de jQuery.

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

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

ejemplo de trabajo: http://jsfiddle.net/qENhd/

Answer 2

Necesita almacenar this en una variable independiente:

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

Answer 3

Crear/Utilizar un closure:

$('.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 4

El truco aquí es salvar this en un local que pueda ser evaluada de forma segura en el setTimeout devolución de llamada

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

Answer 5

Prueba esto:

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

Answer 6

Prueba este insteed:

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

No puedo explicar por qué funciona, pero creo que esto es una referencia a otro "esto" en su setTimeout.

http://jsfiddle.net/Pdrfz/

Answer 7

Prueba esto:

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

Answer 8

Antes setTimeout ejecuta each bucle hubiera terminado de ejecutarse, no va a esperar. También dentro de setTimeout función this no se referirá al elemento DOM.

Pruebe algo como esto.

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

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

También puede intentar algo como esto.

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));