Estoy jugando con JS pero solo soy un principiante. Supongo que de esta manera funciona mejor para mí. Quiero iniciar un diálogo como oyente de eventos creando nuevos divs con elementos de la conversación. También establecí el intervalo de tiempo después de llamar a la función. ¿Cómo puedo evitar mostrar "el final" varias veces después de hacer clic en el botón nuevamente?
<button id="btn">Start the conversation</button> const btn = document.querySelector("#btn"); const container = document.querySelector(".container"); const dialog = [ "🧑 Hello", "👧 Hi", "🧑 You're new here?", "👧 Yes.", "🧑 Would you like a drink?", "👧 Sure.", ]; let i = 0; btn.addEventListener("click", generateConversation); // setTimeout(generateConversation, 1000); function generateConversation() { let newSay = document.createElement("div"); newSay.innerText = dialog[i]; container.appendChild(newSay); i++; setInterval(generateConversation, 1000); if (i >= dialog.length) { newSay.innerText = "The End"; intervalId = setInterval(generateConversation, 1000); clearInterval(intervalId); }Apliqué las sugerencias de Pedro pero el código sigue ejecutándose. ¿Cómo detenerlo cuando se alcanza la longitud de diálogo?
Para ejecutar un EventListener solo una vez, puede pasar una opción de "once": true :
btn.addEventListener("click", generateConversation, { once: true }); Dado que solo desea que la conversación comience cuando se hace clic en el botón, mueva setInterval al interior de generateConversation y guárdelo en una variable, devuelve una identificación que se puede usar para eliminarlo:
clearInterval(intervalId); <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button id="btn">Start the conversation</button> <div class="container"></div> <script> const btn = document.querySelector("#btn"); const container = document.querySelector(".container"); const dialog = [ "🧑 Hello", "👧 Hi", "🧑 You're new here?", "👧 Yes.", "🧑 Would you like a drink?", "👧 Sure.", ]; let i = 0; btn.addEventListener("click", generateConversation, { once: true }); function generateConversation() { intervalId = setInterval(() => { let newSay = document.createElement("div"); newSay.innerText = dialog[i]; container.appendChild(newSay); i++; if (i >= dialog.length) { newSay.innerText = "The End"; clearInterval(intervalId); } }, 1000); } </script> </body> </html>Has asignado un intervalo establecido a una variable como esta
var myVar = setInterval(generateConversation, 1000);y luego para borrar setInterval pase esa var en
clearTimeout(myVar);para iniciar el chat al hacer clic en el botón, debe colocar esta línea dentro del evento de clic del botón
var myVar = setInterval(generateConversation, 1000);verifique el siguiente código de actualización.
$("#btn").click(function(){ myVar = setInterval(generateConversation, 1000); });aquí está la demostración de trabajo, espero que sea fácil de entender cómo funciona clearInterval.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button id="btn">Start the conversation</button> <div class="container"></div> <script> const btn = document.querySelector("#btn"); const container = document.querySelector(".container"); const dialog = [ "🧑 Hello", "👧 Hi", "🧑 You're new here?", "👧 Yes.", "🧑 Would you like a drink?", "👧 Sure.", ]; let i = 0; // setTimeout(generateConversation, 1000); var myVar; function generateConversation() { let newSay = document.createElement("div"); newSay.innerText = dialog[i]; container.appendChild(newSay); i++; if (i >= dialog.length) { newSay.innerText = "The End"; myStopFunction(); } } function myStopFunction() { clearTimeout(myVar); } $(document).ready(function() { $("#btn").click(function(){ myVar = setInterval(generateConversation, 1000); }); }); </script> </body> </html>