Wie erstelle ich eine eindeutige ID?

Question

Ich führe zweimal den Anruf zu Google, um 20 Bilder zu bekommen (Google bietet standardmäßig nur einen Satz von 10 Bildern für einen einzigen Anruf). Allerdings muss ich eine einzelne eindeutige ID für jedes Element generieren, das ich bekomme. Hier ist es die jQuery ich verwende aber der zweite Satz von 10 Bildern wird die gleiche ID wie im vorherigen Satz:

function loadImage() { 
    var uniqueId = (function() { 
     var counter = 0; 
     return function(prefix) { 
      counter++; 
      return prefix ? prefix + '' + counter : counter; 
     } 
    })(); 
    // GOOGLE IMAGES FRONT 
    function createGoogleImagesLoad(initialValue) { 
     var termS;   
     termS = $("#usp-title").val(); 
     var _start = initialValue || 1; 
     var imagesCount = 10; 
     var myCx = 'MY_CX'; 
     var myKey = 'MY_KEY'; 
     var $grid = $('.grid').packery({ 
      itemSelector: '.grid-item', 
      percentPosition: true 
     }); 
     return function() { 
      $.getJSON("https://www.googleapis.com/customsearch/v1", { 
      q: termS, 
      alt: "json", 
      searchType: "image", 
      cx: myCx, 
      num: imagesCount, 
      start: _start, 
      key: myKey, 
      language: "it", 
      rights: "cc_publicdomain, cc_attribute", 
      filter: "1", 
      safe: "high", 
      imgType: "photo", 
      fileType: "jpg" 
      }, 
      function (data) { 
       $.each(data.items, function(i, item) { 
       var uniq = uniqueId('thing_'); 
       var $items = $('<div class="col-xs-12 col-md-6 grid-item">'.concat(
        '<div class="thumbnail">', 
        '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />', 
        '<label for="', uniq, '">', 
        '<img class="img-responsive" src="' + item.link + '">', 
        '</label>', 
       '</div>', 
       '</div>')); 
       $grid.append($items).packery('appended', $items); 
       $grid.imagesLoaded().progress(function() { 
       $grid.packery(); 
       $('body').on('change', '.grid .thumbnail :checkbox', function() { 
        var urls = []; 
        $(':checkbox:checked').each(function() { 
        urls.push($(this).next('label').find('img').attr('src')); 
        }); 
        var str = ''; 
        urls.forEach(function (url) { 
        str += '<div class="col-xs-12 col-md-6 grid-item"><div class="thumbnail"><img onerror="hideContainer(this)" src="' + url + '"/></div></div>'; 
        }); 
        $('#usp-custom-4').val(str); 
       }); 
       }); 
      }); 
      }); 
      _start += imagesCount; 
     } 
    } 
    var googleImagesFront = createGoogleImagesLoad(); 
    googleImagesFront(); 
} 

Answer 1

Rufen Sie zweimal loadImage() an? Das ist das Problem, es regeneriert die uniqueId-Funktion jedes Mal und setzt counter auf 0. Verschieben Sie die uniqueId Funktion außerhalb von loadImage und es sollte es beheben.

Answer 2

Wenn Sie eine eindeutige ID wollen Sie dieses library verwenden können, die die Standard-RFC4122 implementiert , seine Verwendung ist sehr einfach, Sie brauchen nur die library hinzufügen und die Methode der Version wählen, die Sie erzeugen wollen:

console.log('UUID v1:', uuid.v1()); 
 
console.log('UUID v4:', uuid.v4());

<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.7/uuid.min.js"></script>

Answer 3

Die Variable counter wird immer initialisiert, wenn Sie die Funktion aufrufen. Wenn Sie var counter = 0; diese Variable global oder außerhalb der Funktion platzieren, sollten Sie eindeutige IDs erhalten können.