Как передать "это" в обратный вызов setTimeout

в 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 всегда будет содержать последний элемент, потому что функция оценивается после всех назначений.
Я не могу использовать 3-й параметр setTimeout() потому что он не будет работать в IE.
Это не рекомендуется использовать setTimeout() С оценку метод по соображениям безопасности.

так как я могу получить доступ к моему объекту через setTimeout() ?

редактировать

Я знаю, что этот вопрос уже размещенные.
Но я думал, что это было немного специфично с each() контексте.
Теперь кто-то полностью изменил название моего вопроса, который изначально был чем-то вроде ' setTimeout () - jQuery.каждый() это параметр объекта'

9
javascript jquery scope settimeout

8 ответов

Не используйте setTimeout, используйте собственные инструменты jQuery.

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

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

пример: http://jsfiddle.net/qENhd/

15

создать/использовать 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

13

до 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));
3

нужно в магазине this в отдельной переменной:

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

фокус здесь в том, чтобы сохранить this в локальный, который можно безопасно оценить в setTimeout обратный звонок

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

попробуйте это:

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

попробуйте этот insteed:

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

Я не могу объяснить, почему это работает, но я думаю, что это ссылка на другое "это" в вашем setTimeout.

http://jsfiddle.net/Pdrfz/

2

попробуйте это:

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