Question

此脚本生成带有云图像的div，这些图像从左到右以随机高度和间隔飞行。它通常有效，但它不断增加divs＆＃34; id＆＃34;无限地。我无法弄清楚如何重置计数器是安全的，从而不会在同一时间内存在两个相同的内容。

function cloudgenerator(){

var nr=1;
var t1 = 20000;
var t2 = 50000;

function cloud(type,time,nr){
    $("#sky").append("<div id=\"cloudFL"+nr+"\" class=\"cloud"+type+"\" ></div>");
        setTimeout(function() { 
            $("#cloudFL"+nr).css({top:Math.floor(Math.random() * 400)+'px'}).animate({
                left:'100%',
                },time,'linear',function(){$(this).remove();
                });
        }, Math.floor(Math.random() * t1));
}; 

function wave(){
    var tx = 0;

    setInterval(function(){
        cloud(1,t1,nr);
        nr++;

        var n = $( "div.cloud1" ).length;
        $( "span" ).text( "There are " + n +" n and "+ tx +" tx")

        if(tx < n){tx = n}
        else(tx = 1)

        },500); 
};

wave()};

cloudgenerator()

在底部，有一条指令可以检查div的数量是否开始下降，并在span中显示这些值以进行调试。

Answer 1

为什么不获取时间戳并将其添加到您的ID？

如果您不需要ID，我会坚持@ hon2a，只需将样式添加到班级并删除ID。

另一种解决方案：

您可以检查是否使用了ID xyz。像这样。

  var cloudCount = jQuery('.cloud20000').length + jQuery('.cloud50000').length + 10;
  for(var i = 0; i <= cloudCount; i++) {
    if(jQuery('#cloudFL' + i).length <= 0) {
      nr = i;
      return false;
    }
  }

  cloud(1,t1,nr);

Answer 2

快速简便的解决方案
您可以从最低的数字开始遍历JQuery中的id，直到找到产生0结果的JQuery选择器...

var newid = 0;
var i = 1;
while(newid == 0) {
    if( $('#cloudFL' + i).length == 0 ) { newid = i; }
    else { i++; }
}

<强> JSFIDDLE DEMO

替代解决方案（可扩展）
鉴于您一次可能在屏幕上有许多云，您可以尝试这种替代方法。这种方法创建了一系列使用过的ID＆＃39;并且波函数然后检查是否有任何使用过的ids＆＃39;在为云功能创建新ID之前可用。这将更有效地运行，然后快速修复解决方案＆＃39;在屏幕上出现许多云的情况下。

function cloudgenerator(){

var nr=1;
var t1 = 20000;
var t2 = 50000;
var spentids = [];

function cloud(type,time,id){
    $("body").append('<div id="' + id + '" class="cloud' + type + '" >' + id + '</div>');
        setTimeout(function() { 
            $('#'+id).css({top:Math.floor(Math.random() * 400)+'px'}).animate({
                left:'100%',
                },time,'linear',function(){
                    spentids.push( $(this).attr('id') );
                    $(this).remove();
                });
        }, Math.floor(Math.random() * t1));
}; 

function wave(){

    setInterval(function(){
        if(spentids.length == 0) {
            cloud(1,t1,"cloudFL" + nr);
            nr++;
        } else {
            spentids = spentids.sort();
            cloud(1,t1,spentids.shift());                
        }

        },500); 
};

wave()};

cloudgenerator()

<强> JSFIDDLE DEMO - ALTERNATIVE

将jquery变量重置为不存在的最低可能值

2 个答案: