jQuery-Plugin, SetTimeout und div nicht sein hängen, einfach seltsam Fall

Question

Ich bin ein jquery Schreiben unter den Code-Plugin nicht funktioniert (ich meine die setTimeout funktioniert, aber nichts ist append)

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

Und die Code unten arbeitet:

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

diese ist ein jquery Auswahl. Ich verstehe wirklich nicht, was vor sich geht. Das kann kein Problem sein. Kann es sein? Ich verstehe es nicht. Vielen Dank im Voraus für Sie

bearbeiten helfen: Blase ist ein einfaches div (“„)

Unterhalb der ganzen Plugin-Code:

(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

Da die Blasen später angehängt werden aufgrund der setTimeout(), kommt diese Wähler in Ihrer randomize() Funktion leer aus:

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

Das ist, warum sie in einer einfachen for-Schleife funktioniert gut anhängt.

Wenn Sie wirklich das setTimout() verwenden möchten Ihre Blasen anhängen, eine Option ist, sie zu gestalten, wenn Sie sie hinzufügen:

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 ist eine Javascript-Auswahl, die Wähler in jquery ist $(this)

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

Answer 3

Ist es, weil Sie immer noch() weg rechts randomisieren nennen, auch wenn Sie die Erstellung für eine Sekunde verschieben?

Sie werden in diesem Fall aus dem gleichen Grund auch eine leere Auswahl zurückgeben.

Wahrscheinlich möchten Sie auch verwenden die Timer-Variable in SetTimeout() statt Hardcoding alle auf 1000 ms?