jQueryプラグイン、のsetTimeoutと追加されていないDIV、簡単な奇妙なケース

Question

私は以下のコードをプラグインのjQueryを書いて動作していない（私はsetTimeoutをが動作しているが、何も追記されないことを意味）

var self = this; 
for (var i=0; i<=10; i++) { 
    setTimeout(function() { 
     self.append(bubble); 
    }, 1000); 
} 

そして、以下のコードは動作しています：

for (var i=0; i<=10; i++) { 
    this.append(bubble); 
} 

このはjqueryの選択です。私は実際に何が起こっているのか分からない。それは範囲の問題ではありません..それはできますか？理解できません。バブルは、単純なdiv要素（」「）全体のプラグインコードの下

です：

(function($) { 
    'use strict'; 

    $.fn.randomBubble = function(options) { 
     var self = this; 
     var settings = $.extend({ 
      color: 'blue', 
      backgroundColor: 'white', 
      maxBubbleSize: 100 
     }, options); 

     var frame = { 
      height: this.height(), 
      width: this.width(), 
     } 

     var bubble = "<div class='randomBubble'> </div>"; 


     this.getLeft = function(width) { 
      var left = Math.random() * frame.width; 
      if (left > (frame.width/2)) { 
       left -= width; 
      } else { 
       left += width; 
      } 
      return left 
     } 

     this.getTop = function(height) { 
      var top = Math.random() * frame.height; 
      if (top > (frame.height/2)) { 
       top -= height; 
      } else { 
       top += height; 
      } 
      return top 
     } 


     this.removeBubbles = function() { 
      var currentBubbles = this.find('.randomBubble'); 
      if (currentBubbles.length) { 
       currentBubbles.remove(); 
      } 
     } 

     window.oh = this; 
     for (var i = 0; i <= 10; i++) { 
      var timer = Math.random() * 1000; 
      setTimeout(function() { 
       window.uh = self; 
       self.append(bubble); 
       console.log("oh"); 
      }, 1000); 
     } 

     this.randomize = function() { 
      //self.removeBubbles(); 
      var allBubbles = this.find('.randomBubble'); 

      allBubbles.each(function(i, el) { 
       var height = Math.random() * settings.maxBubbleSize; 
       var width = height; 
       $(el).css({ 
        color: settings.color, 
        backgroundColor: settings.backgroundColor, 
        zIndex: 1000, 
        position: 'absolute', 
        borderRadius: '50%', 
        top: self.getTop(height), 
        left: self.getLeft(width), 
        height: height, 
        width: width 
       }); 

      }); 
     } 
     this.randomize(); 
     //var run = setInterval(self.randomize, 4000); 

     return this.find('.randomBubble'); 
    } 


})(jQuery); 

Answer 1

気泡が原因setTimeout()に後から追加されるので、あなたのrandomize()機能で、このセレクタが空に来る：

var allBubbles = this.find('.randomBubble'); 

ループのためのシンプルな中にそれらを追加すると、正常に動作する理由です。

あなたが本当にあなたの泡を追加するsetTimout()を使用する場合は、一つの選択肢は、あなたがそれらを追加するときにそれらのスタイルを設定することです：

setTimeout(function() { 
    var height = Math.random() * settings.maxBubbleSize; 
    var width = height; 
    var b = $(bubble).css({ 
     color: settings.color, 
     backgroundColor: settings.backgroundColor, 
     zIndex: 1000, 
     position: 'absolute', 
     borderRadius: '50%', 
     top: self.getTop(height), 
     left: self.getLeft(width) , 
     height: height, 
     width: width 
    }); 
    self.append(b); 
}, 1000); 

Fiddle

Answer 2

thisはjavascriptの選択で、jQueryのセレクタが$(this)であるあなたが

編集助けを事前に感謝

$.fn.randomBubble = function(options) { 
    var self = $(this); 
}; 

Answer 3

作成を1秒間延期した場合でも、すぐにrandomize（）を呼び出すことができますか？

同じ理由で、この場合も空の選択が返されます。

また、タイマー変数をsetTimeout（）で1000ミリ秒にハードコードするのではなく、を使用しますか？