javascript - 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选择。我实在不明白这是怎么回事。这不可能是范围问题..可以吗？我不明白。预先感谢您的帮助

编辑:bubble 是一个简单的 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');

这就是为什么将它们附加到一个简单的 for 循环中效果很好。

如果您确实想使用 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