javascript - universo - teoria heliocentrica

Cómo pasar ''esto'' a 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 aparecer cada .item después de un pequeño temporizador aleatorio como:

javascript

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

Aquí itm siempre contendrá el último elemento porque la función se evalúa después de todas las asignaciones.
No puedo usar el tercer parámetro de setTimeout() porque no funcionará en IE.
No se recomienda usar 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 ha sido publicada.
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 de objeto''

Answer 1

Antes de que setTimeout ejecute, each ciclo habría terminado de ejecutarse, no esperará. También dentro de la función setTimeout this no se referirá al elemento DOM.

Prueba 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 puedes probar 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));

Answer 2

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 3

El truco aquí es guardar this en un local que se pueda evaluar de forma segura en la devolución de llamada setTimeout

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

Answer 4

Necesita almacenar this en una variable separada:

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

Answer 5

No use 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 6

Prueba esto 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

Prueba esto:

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