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

「this」を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 には常に最後の項目が含まれます。
IEで動作しないため、 setTimeout()の3番目のパラメータは使用できません。
セキュリティ上の理由から、 setTimeout() eval メソッドと併用することはお勧めしません。

どうすれば setTimeout()でオブジェクトにアクセスできますか?


編集

I know that this question have already been posted.
But I though that it were slightly specific with the each() context.
Now someone have entirely changed the title of my question that was originally something like 'setTimeout() - jQuery.each() this object parameter'

9
申し訳ありませんが、 itm = $(this)の代わりに itm = $(this)を使っていました。次に、今私は受け入れる答えが分からない:)
追加された 著者 Pierre de LESPINAY,
それは実際には問題でした
追加された 著者 Pierre de LESPINAY,
setTimeout()の中の this はグローバルオブジェクトを参照します。上記のコードは、最後の項目では機能しません。
追加された 著者 Kevin B,
@PierredeLesPINAYああ。 var itm itm との違いは、 var を指定しない場合、関数。そのため、setTimeoutはリストの最後の要素を見たことがあります。
追加された 著者 Izkata,

8 答え

setTimeoutを使用しないで、jQuery独自のツールを使用してください。

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

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

Working example: http://jsfiddle.net/qENhd/

15
追加された
私にとって最高の答えと思われる、ありがとう
追加された 著者 Pierre de LESPINAY,
ブートストラップ3のツールチップで動作していないようですか? $( '#elem')。tooltip( 'show')。hide(5000).tooltip( 'hide');
追加された 著者 DavidScherer,
@ShankarSangoli:確かにそれがあります。
追加された 著者 georg,
@ShankarSangoli:これは必須条件ではありません。少なくとも、元のコードはそれをしません。
追加された 著者 georg,
@ ShankarSangoli私はそれが動作しない理由を参照してくださいない。これはforループではないので、同じ問題はないことを覚えておいてください。
追加された 著者 Kevin B,
これは機能しません。
追加された 著者 ShankarSangoli,
divの fadeIn が順番どおりに並んでいないことに気づいたら、
追加された 著者 ShankarSangoli,

クロージャーを作成/利用する

$('.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/ja/JavaScript/Guide/Closures

13
追加された
OPはJQueryの組み込みツールを動作させることができないので、これははるかに簡単で最も簡単です
追加された 著者 Izkata,

setTimeout ループを実行する前に実行を終了します。また、 setTimeout this 関数はDOM要素を参照しません。

このようなことを試してみてください。

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

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

You can also このようなことを試してみてください。

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 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
追加された

別の変数に this を格納する必要があります:

$('.item').each(function() {
  var me = $(this);
  setTimeout(function() {
    me.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の別の "this"への参照だと思います。

http://jsfiddle.net/Pdrfz/

2
追加された

これを試して:

 $('.item').each(function() {
    var item =$(this);
    setTimeout(function() {
            item.fadeIn(1000);
        },
        Math.floor(Math.random() * 1000));
   });
2
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript