6

jQueryでタイムアウトを動的に設定したい。動的に設定されたタイムアウト関数は$（ "this"）を使用する必要がありますが、機能させることができないようです。

例：

$("div").each(function(){
    var content = $(this).attr('data-content')
    setTimeout("$(this).html('"+content+"')",$(this).attr('data-delay'));
});​

http://jsfiddle.net/qmhmQ/

これを行うための最良の方法は何ですか？

4

6 に答える 6

16 
$("div").each(function(){
    var content = $(this).attr('data-content'),
        $this = $(this); // here $this keeps the reference of $(this)
    setTimeout(function() {

      // within this funciton you can't get the $(this) because
      // $(this) resides within in the scope of .each() function i.e $(this)
      // is an asset of .each() not setTimeout()
      // so to get $(this) here, we store it within a variable (here: $this) 
      // and then using it

        $this.html(content);
    }, $this.attr('data-delay'));
});​

デモ

于 2012-05-09T08:30:52.623 に答える
3

コードは次のようになります。

  1. 文字列の代わりに関数を渡します。説明：文字列をsetTimeoutに渡すと、元のスコープとは異なるスコープで実行されるため、エラーが発生するため、問題が発生します。

  2. jQuerydata()メソッドを使用する

    $("div").each(function(){
     var content = $(this).attr('data-content'),
         $el = $(this),
         setContent = function(){
            $el.html(content);
         }
     setTimeout(setContent,$el.data('delay'));
});​

関数を変数に割り当て、その変数をパラメーターとしてsetTimeoutに渡すことができます。これが最もクリーンな方法です。

于 2012-05-09T08:36:28.280 に答える
3

クロージャを使用します（いくつかの チュートリアル）。

で文字列を使用するsetTimeoutことはお勧めできません。また、クロージャー内で使用するとコンテキスト（つまり、call-sitethis ）が変更される可能性があるため、注意してください。

データ属性を使用する場合は、jQueryデータ関数を使用できます。

$("div").each(function() {
  var instance = $(this);
  var content = instance.data('content');
  var method = function() {
    instance.html(content);
  };
  setTimeout(method, instance.data('delay'));
});
div {
  border: 1px solid black;
  margin: 5px;
  height: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-content="fus" data-delay="1000"></div>
<div data-content="ro" data-delay="2000"></div>
<div data-content="dah" data-delay="5000"></div>

于 2012-05-09T08:36:45.420 に答える
2

上記の答えを1つ拡張しています。

  1. クラスまたはIDを使用して、JavaScriptでdivを参照します。これにより、ページ内でのタグ名の競合がさらに回避されます。

つまり、更新されたHTMLは、

<div data-content="fus" data-delay="1000" class="dv"></div>
<div data-content="ro" data-delay="2000" class="dv"></div>
<div data-content="dah" data-delay="5000" class="dv"></div>​

これで、更新されたJavaScriptコードは次のようになります。

$(".dv").each(function(){
    var content = $(this).attr('data-content'),
    $this = $(this);
    setTimeout(function() {
       $this.html(content);
    }, $this.attr('data-delay'));
});​

本線はどこにありますか

$ this = $（this）;

setTimeout関数で使用される変数に現在の要素を割り当てているところ。

このリンクを参照してください

于 2012-05-09T08:46:05.093 に答える
1

settimeoutから$（this）を取り出し、 $（ "div"）。each（function（）{ thislineの直後に「self」と言うローカル変数に保存します。

var self=$(this);

そしてその自己をさらに使用します。

于 2012-05-09T08:35:49.520 に答える
1

以下は、空白、読みやすさ、および意図を明らかにすることの良い妥協点のようです。

$('div').each(function(){
    var element = $(this)
    var content = element.attr('data-content')
    var delayms = element.attr('data-delay')
    var action = function() { element.html(content) }

    setTimeout(action, delayms)
})

参照：http ：//jsfiddle.net/wilmoore/LSs6g/

于 2012-09-14T19:11:17.340 に答える