¿Cómo evitar que un objeto genere copias adicionales del mismo contenido?

Cada vez que presiono el botón sigue generando la misma información adicional. No quiero eso porque no quiero que mis usuarios en mi sitio web presionen accidentalmente el botón de nuevo y note que otra copia de los mismos datos se envía de nuevo, así que ¿cómo puedo evitar eso?

Aquí hay un ejemplo animado de GIF a lo que me refiero.

Ejemplo visual

Y aquí está el código del que estoy hablando.

index.php

     $(document).ready(function() { var z = $('.z'); // Grab class z to toggle var x = $('#x'); var output = ''; var XHR = function(){ $.getJSON("x.json", function(data) { $.each(data.shop, function(index, element) { for (var j in element) { output += element[j] + '
'; } }); x.html(output); }); }; $("button").click(function(){ XHR(); }); }); h1 { color: gold; } #x { color: white; text-align: center; } .z { background-color: red; width: 250px; margin: auto; padding-bottom: 5px; }

Details

x.json

 { "shop": [{ "item": "Ps3", "cost": "$150" }, { "item": "xbox 360", "cost": "$140" }, { "event": "Black Friday", "date": "4-25-2018" }, { "special_guest": "John Doe", "time": "4:30 pm" } ] } 

Continuamente agregas a la salida.

Solo cambio

 var output; var XHR = function() { output = ""; ... 

Me gusta esto

 $(function() { var z = $('.z'); // Grab class z to toggle var x = $('#x'); var output; var XHR = function() { output = ""; var data = { "shop": [{ "item": "Ps3", "cost": "$150" }, { "item": "xbox 360", "cost": "$140" }, { "event": "Black Friday", "date": "4-25-2018" }, { "special_guest": "John Doe", "time": "4:30 pm" } ] } $.each(data.shop, function(index, element) { for (var j in element) { output += element[j] + '
'; } }); x.html(output); }; $("button").click(function() { XHR(); }); });
 h1 { color: gold; } #x { color: white; text-align: center; } .z { background-color: red; width: 250px; margin: auto; padding-bottom: 5px; } 
  

Details

Como está almacenando la salida como una variable más arriba en el ámbito léxico, cada vez que se invoca la función, el operador += está mutando los datos y agregando los resultados a la cadena ya existente en lugar de reemplazarla o crear una nueva referencia. Intente volver a configurar la variable de output en una cadena en blanco al inicio de la función XHR o usando = lugar de += .

Cuando tiene varias opciones, es posible que necesite otra solución, ya que es posible que desee adjuntar los resultados para que el usuario vea cada uno de los diferentes elementos que se muestran.

Puede usar el método .one() para ejecutar el controlador de clic solo la primera vez.

 $("button").one("click", XHR); 

Tienes diferentes opciones, algunas de ellas …

  1. Desactivar el botón una vez se presiona.
  2. Retire el botón una vez que se presiona.
  3. La solución “one ()” propuesta por barman (muy limpia).
  4. Verificando el contenido de “#x” antes de agregar el contenido, simplemente haciéndolo si está vacío.

Todo funcionará, y yo elegiría uno dependiendo de su interfaz y de lo que se sienta mejor para el usuario. Tal vez hacer que el botón desaparezca es extraño para tu caso, etc.

También. Si desea que la función (XHR) permanezca activa, por lo que quizás quiera reactivarla en alguna situación, tal vez 1, 2 o 4 son el camino a seguir.

Puede hacer todo eso dentro de la función de evento onclick o dentro de su función XHR. Por ejemplo, para la opción 4 …

 $('button').click(function(){ if ($('#x').html() != '') XHR(); }); 

¡Espero que ayude!