Javascript 向setInterval循环添加计数器ID

我正在使用三个功能：

• 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

，然后设置1s到6s之间的间隔来调用

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
    }

我的问题是进程只运行一次。创建气泡1，移除气泡1。气泡2永远不会产生

---

您不能这样调用

setInterval

：

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

它将函数作为参数，因此它应该是：

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

这对我有用

您需要了解，

bubbleID

在通过值传递时不会增加。你应该让它全球化

var bubbleID;

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

另外，正如我所猜测的，您希望气泡在该时间间隔内随机出现。您应该了解，

randomInt（6000，1000）

不是每次都在计算

这就是实际发生的情况：

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

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

---

我将这样做：.

以及使用

setInterval

，

bubbleID

通过值传递（只有对象通过引用传递）到

makeBubble

函数中。为全局计数器使用与

makeBubble

函数中的参数名称不同的名称。

可能还有点晚

$（文档）.ready（函数（）{
startBubbleMachine（）；
});
var bubbleID=1；
函数startBubbleMachine（）{
console.log（“启动气泡机”）；
var-rInt=randomInt（60001000）；
setInterval（函数（）{makeBubble（）}，rInt）；
}
函数makeBubble（）{
var-wh=randomInt（143,50）；
console.log（'making bubble number'+bubbleID）；
$（'.wrapper'）.append（''）；
killBubble（bubbleID）；
bubbleID++；
}
函数killBubble（bubbleID）{
setTimeout（函数（）{
console.log（'killing bubble number'+bubbleID）；
//谋杀时间
$（“.db bubble-”+bubbleID）.remove（）；
}, 2000);
//这就扼杀了泡沫
}
函数randomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}

由于函数在第一个实例中被传递值1，因此它一直以值1运行。移除它，我们就完成了。

通过删除

var

将

bubbleID

移动到全局范围，并更正

setInterval

格式

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

---

setInterval（makeBubble（bubbleID）

您正在使用返回结果的函数作为间隔回调，该函数未定义。请查看超时的处理方法。。还要注意，如果您以随机间隔生成气泡，则可能会有一个先前生成的气泡，比稍后生成的气泡运行得晚……因此，多个气泡将以s结尾整个事情需要重新考虑一下。

$(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);

}

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