「this」をsetTimeoutコールバックに渡す方法

Question

「this」をsetTimeoutコールバックに渡す方法

.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

追加された 06 2月 2012 〜で 04:50 著者 Pierre de LESPINAY 編集された 06 2月 2012 〜で 05:28

ビュー: 6

源

ro ru fr es pt de hi bn ar kk uz be tr uk

申し訳ありませんが、 itm = $（this）の代わりに itm = $（this）を使っていました。次に、今私は受け入れる答えが分からない:)

追加された 06 2月 2012 〜で 05:21, 著者 Pierre de LESPINAY, 源

それは実際には問題でした

追加された 07 2月 2012 〜で 07:50, 著者 Pierre de LESPINAY, 源

setTimeout（）の中の this はグローバルオブジェクトを参照します。上記のコードは、最後の項目では機能しません。

追加された 06 2月 2012 〜で 04:57, 著者 Kevin B, 源

@PierredeLesPINAYああ。 var itm と itm との違いは、 var を指定しない場合、関数。そのため、setTimeoutはリストの最後の要素を見たことがあります。

追加された 06 2月 2012 〜で 06:59, 著者 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

追加された 06 2月 2012 〜で 04:57 著者 georg

源

私にとって最高の答えと思われる、ありがとう

追加された 06 2月 2012 〜で 05:38, 著者 Pierre de LESPINAY, 源

ブートストラップ3のツールチップで動作していないようですか？ $（ '＃elem'）。tooltip（ 'show'）。hide（5000）.tooltip（ 'hide'）;

追加された 15 4月 2015 〜で 06:58, 著者 DavidScherer, 源

@ShankarSangoli：確かにそれがあります。

追加された 06 2月 2012 〜で 05:05, 著者 georg, 源

@ShankarSangoli：これは必須条件ではありません。少なくとも、元のコードはそれをしません。

追加された 06 2月 2012 〜で 05:10, 著者 georg, 源

@ ShankarSangoli私はそれが動作しない理由を参照してくださいない。これはforループではないので、同じ問題はないことを覚えておいてください。

追加された 06 2月 2012 〜で 05:08, 著者 Kevin B, 源

これは機能しません。

追加された 06 2月 2012 〜で 05:02, 著者 ShankarSangoli, 源

divの fadeIn が順番どおりに並んでいないことに気づいたら、



追加された 06 2月 2012 〜で 05:07, 
著者 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

追加された 06 2月 2012 〜で 04:52
著者 xandercoded



源



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

追加された 06 2月 2012 〜で 05:39, 
著者 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

追加された 06 2月 2012 〜で 04:56
著者 ShankarSangoli



源





ここのトリックは、 this を setTimeout コールバックで安全に評価できるローカルに保存することです
$('.item').each(function() {
  var self = this;
  setTimeout(function() {
    $(self).fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
});



2

追加された 06 2月 2012 〜で 04:52
著者 JaredPar



源





これを試して：
$('.item').each(function() {
 var myVar = $(this);
setTimeout(function() {
myVar.fadeIn(1000);
}, Math.floor(Math.random() * 1000));
})



2

追加された 06 2月 2012 〜で 04:53
著者 Ninja



源





別の変数に this を格納する必要があります：
$('.item').each(function() {
  var me = $(this);
  setTimeout(function() {
    me.fadeIn(1000);
  }, Math.floor(Math.random() * 1000));
})



2

追加された 06 2月 2012 〜で 04:52
著者 SLaks



源





このinsteedを試してください：
    $('.item').each(function() {
        var elm = this;
      setTimeout(function() {
        $(elm).fadeIn(1000);
      }, Math.floor(Math.random() * 1000));
    })

私はなぜそれが動作するのか説明することはできませんが、私はこれはあなたのsetTimeoutの別の "this"への参照だと思います。
 http://jsfiddle.net/Pdrfz/ 


2

追加された 06 2月 2012 〜で 04:54
著者 Simon Edström



源





これを試して：
 $('.item').each(function() {
    var item =$(this);
    setTimeout(function() {
            item.fadeIn(1000);
        },
        Math.floor(Math.random() * 1000));
   });



2

 追加された 06 2月 2012 〜で 04:55
著者 Kyle



源

著者 xandercoded · Answer 1 · 2012-02-06T04:52Z

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

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

著者 ShankarSangoli · Answer 2 · 2012-02-06T04:56Z

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

著者 JaredPar · Answer 3 · 2012-02-06T04:52Z

ここのトリックは、 this を setTimeout コールバックで安全に評価できるローカルに保存することです

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

著者 Ninja · Answer 4 · 2012-02-06T04:53Z

これを試して：

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

著者 SLaks · Answer 5 · 2012-02-06T04:52Z

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

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

著者 Simon Edström · Answer 6 · 2012-02-06T04:54Z

このinsteedを試してください：

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

私はなぜそれが動作するのか説明することはできませんが、私はこれはあなたのsetTimeoutの別の "this"への参照だと思います。

http://jsfiddle.net/Pdrfz/

著者 Kyle · Answer 7 · 2012-02-06T04:55Z

これを試して：

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