Tengo dos funciones, functionOne() y functionTwo().
¿Cómo puedo llamar a functionTwo() 10 segundos después de que finalice/se llame a functionOne()?
Me gustaría que se produzca functionOne después de hacer clic en un botón, y luego functionTwo 10 segundos después de que finalice functionOne (¡sin la necesidad de hacer clic en un botón nuevamente/que el usuario haga algo!).
¡Vea a continuación mi código!
<p id="paragraphChange">"Hello World"</p> <button type="button" id="clickToChangeText" onClick="functionOne()">Click!</button> <script> functionOne() { document.getElementById("paragraphChange").innerHTML = "Bye World"; } functionTwo() { document.getElementById("paragraphChange").innerHTML = "Jokes I'm still here"; } </script>Traté de usar setTimeout, pero el problema es que no creo que haya un evento 'onend' que pueda usar para la primera función. P.ej:
setTimeout(functionOne.onend, 10,000);
Este código llama a functionOne onClick y llama a functionTwo 10 segundos después.
<p id="paragraphChange">"Hello World"</p> <button type="button" id="clickToChangeText" onClick="functionOne()">Click!</button> <script> function functionOne() { document.getElementById("paragraphChange").innerHTML = "Bye World"; setTimeout(() => functionTwo(), 10000); } function functionTwo() { document.getElementById("paragraphChange").innerHTML = "Jokes I'm still here"; } </script>Lo más importante es que debe declarar sus funciones correctamente usando la palabra clave function : function functionOne , function functionTwo .
Aquí está la documentación para setTimeout : "El método global setTimeout() establece un temporizador que ejecuta una función ... una vez que el temporizador expira". Entonces, pasa la función que desea ejecutar una vez que el temporizador se haya completado.
Y aquí hay algunos métodos más para abordar el problema.
Guarde en caché su elemento de párrafo junto con el botón al frente para que el código esté lo más SECO posible.
Mueva el JS en línea al script y use addEventListner al elemento para
Use textContent en lugar de innerHTML porque no está agregando HTML
// Cache the elements const para = document.querySelector('#paragraphChange'); const button = document.querySelector('#clickToChangeText'); // Add a listener to the button button.addEventListener('click', functionOne, false); // Set the text content of the para element // and then call the second function with a time out function functionOne() { para.textContent = 'Bye World'; setTimeout(functionTwo, 5000); } // Update the para with new text function functionTwo() { para.textContent = 'Jokes I\'m still here'; } <p id="paragraphChange">"Hello World"</p> <button type="button" id="clickToChangeText">Click!</button>No creo que haya nada llamado onend en JavaScript. Tienes que usar setTimeout(functionTwo, 10000) al final de functionOne() así:
function functionTwo() { //code to be execute } function functionOne(){ //code to be execute //End of function setTimeout(functionTwo, 10000); }