Сброс переменной jquery до минимально возможного значения, которое не существует

Question

Этот скрипт генерирует divs с облачными изображениями, которые летают слева направо со случайной высотой и интервалами. Как правило, он работает, но он бесконечно увеличивает приращение div «id». Я не могу понять, как сбросить счетчик безопасно, чтобы никогда не существовало двух одинаковых «id» в одно и то же время.

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

В нижней части, есть команда, которая проверяет, является ли число дивы начинает падать, и представляет эти значения в пролете для отладки.

Answer 1

Быстрое и простое решение
Вы могли бы перебрать идентификаторами в JQuery, начиная с наименьшего номера, пока вы не найдете селектор JQuery, который дает 0 результаты ...

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

JSFIDDLE DEMO

Альтернативное решение (масштабируемое)
Учитывая, что у вас может быть много облаков на экране за один раз, вы можете попробовать этот альтернативный подход. Этот подход создает массив «используемых идентификаторов», и волновая функция затем проверяет, доступны ли какие-либо «используемые идентификаторы» до создания нового идентификатора для облачной функции. Это будет работать намного эффективнее, чем выше «быстрое решение» в ситуациях, когда на экране появляется много облаков.

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

Answer 2

Почему бы не получить временную метку и добавить ее в свой идентификатор?

Если вам не нужны идентификаторы, я буду придерживаться @ hon2a и просто добавлю стиль в класс и удалим идентификаторы.

И еще одно решение:

Вы можете сделать чек, если используется ID хуг. Как это, например,

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