JSFiddle

Question

我正在使用三个功能：

startBubbleMachine()开始制作气泡
makeBubble()使用bubbleID制作气泡来识别它。附加到div。
killBubble()删除了气泡

使用另一个函数randomInt随机化创建气泡的时间，该函数只在一个范围内生成一个随机int。

我真的在努力增加bubbleID，这是创建新气泡并确保正确的气泡被破坏所必需的。我无法确定在哪个阶段增加。

function startBubbleMachine(){
        console.log('starting bubble machine');
        var bubbleID = 1;
        setInterval(makeBubble(bubbleID), randomInt(6000, 1000));
    }

这个功能非常简单。它会初始化bubbleID，然后设置1到6之间的间隔来调用makeBubble()，并传递bubbleID

这是我被困的地方

function makeBubble(bubbleID){
        console.log('making bubble number '+bubbleID);
        $('.wrapper').append('<div class="db-bubble db-bubble-'+bubbleID+'></div>');
        killBubble(bubbleID); // kill the bubble with the current ID
        bubbleID++; // increment the current ID
    }

制作气泡，然后立即调用killBubble()函数。它通过bubbleID以确保正确的泡沫将被谋杀。

然后它会增加bubbleID为下一个气泡创建做好准备。 但这有点不对，我敢肯定。

最后，killBubble()已收到必须谋杀的bubbleID。等待2秒，然后删除。

function killBubble(bubbleID){
        setTimeout(function(){
            // murder time
            $(".db-bubble-"+bubbleID).remove();
        }, 2000);
        // this kills the bubble
    }

我的问题是该流程只运行一次。创建气泡1，移除气泡1。 Bubble 2永远不会被创建。

JSFiddle

Answer 1

您不能以这种方式致电setInterval：

setInterval(makeBubble(bubbleID), randomInt(6000, 1000));

它需要一个函数作为参数，所以它应该是：

setInteval(function() {
    makeBubble(bubbleID);
}, randomInt(6000, 1000));

这JSFiddle Demo对我有用。

您需要了解您的bubbleID在传递by value时没有增加。你应该把它变成全球性的。

var bubbleID;

function startBubbleMachine(){
    console.log('starting bubble machine');
    bubbleID = 1;
    setInterval(function() { makeBubble(bubbleID); }, randomInt(6000, 1000));
}

另外，正如我猜的那样，你希望气泡在那段时间内随机出现。您应该了解每次都会计算randomInt(6000, 1000) NOT 。

这是实际发生的事情：

var temp = randomInt(6000, 1000);
setInterval(function() { ... }, temp);

您需要更改计时器逻辑，以使其以这种方式工作。

我就是这样做的：JS Fiddle。

Answer 2

除了使用setInterval之外，bubbleID正在通过值传递（只有对象通过引用传递）到makeBubble功能中。为全局计数器使用与makeBubble函数中的参数名称不同的名称。

Answer 3

可能有点晚了https://jsfiddle.net/arunzo/Lhn6jv9x/6/

$(document).ready(function () {
    startBubbleMachine();
});
var bubbleID = 1;
function startBubbleMachine() {
    console.log('starting bubble machine');

    var rInt = randomInt(6000, 1000); 
    setInterval(function () {makeBubble()}, rInt);
}

function makeBubble() {
    var wh = randomInt(143, 50);
    console.log('making bubble number ' + bubbleID);
    $('.wrapper').append('<div class="db-bubble db-bubble-' + bubbleID + '" style="transform:rotate(' + randomInt(20, 1) + 'deg);left:' + randomInt(100, 1) + '%;width:' + wh + 'px;height:' + wh + 'px;"></div>');
    killBubble(bubbleID);
    bubbleID++;
}

function killBubble(bubbleID) {
    setTimeout(function () {
        console.log('killing bubble number ' + bubbleID);
        // murder time
        $(".db-bubble-" + bubbleID).remove();
    }, 2000);
    // this kills the bubble
}


function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);

}

因为函数在第一个实例中传递了值1，所以它始终以值1继续运行。删除它，我们完成了。

Answer 4

https://jsfiddle.net/Lhn6jv9x/8/

删除bubbleID并更正var格式

，将setInterval移至全局范围

 function startBubbleMachine() {
    console.log('starting bubble machine');
    bubbleID = 1;
    setInterval(function () {
        makeBubble(bubbleID)
    }, randomInt(6000, 1000));
}

将计数器ID添加到setInterval循环

JSFiddle

4 个答案: