0
138
ViewsActualización del front-end de la aplicación web de Google en parte a través de la secuencia de comandos
Tengo una aplicación web que al hacer clic en un botón inicia una secuencia de comandos y completa el valor de retorno en un lapso, similar a la siguiente:
página.html
<button id="btn">Run function</button> <span id="result_span"> <!--return value from doStuff goes here--> </span> <script> document.getElementById("btn").addEventListener("click",init_function); function init_function(){ console.log('init') let updateLocation = document.querySelector('#result_span') function onFailure(error){ let warning = `<span style="color:red">${error}</span>`; updateLocation.innerHTML = warning; }; function onSuccess(element){ let result = element; updateLocation.innerHTML = result; }; google.script.run.withFailureHandler(onFailure) .withSuccessHandler(onSuccess) .doStuff(); } </script>código.gs
function doStuff(){ //do stuff return string; }Esto funciona correctamente, pero ¿cómo puedo actualizar la interfaz de usuario del front-end mientras se ejecuta el script? Por ejemplo, algo como:
function doStuff(){ //do stuff update-the-user-part-one //do more stuff update-the-user-part-two //do even more stuff return string; } Desafortunadamente console.log('update-the-user-part-one') no va al frente, pero tal vez haya alguna forma de usar devoluciones de llamada o prometer tener <span id="updates"></span> innerHTML actualizar durante el script.
1 answers
Answer question0
Si lo que desea es una actualización en tiempo real en el sitio durante la ejecución del script, no pude encontrar ninguna referencia o recurso para que funcione.
Aunque, pude simular un poco lo que quieres a continuación. Es posible que este enfoque no sea óptimo, pero aun así logrará lo que desea (en apariencia).
Suponiendo que esta es su función:
function doStuff(){ // do part 1 then update site updateTheUserP1 // do part 2 then update site updateTheUserP2 // do the last part and return the final value string = "done all"; return string; }Le propongo que separe su función en múltiples funciones dependiendo de cuándo desee que se actualice el sitio. Así que decidí dividirlo en 3 partes.
function updateTheUserP1(){ string = "done 1"; // assuming part 1 finishes after 1 second Utilities.sleep(1000) return string; } function updateTheUserP2(){ string = "done 2"; // assuming part 2 finishes after 1 second Utilities.sleep(1000) return string; } function doStuff(){ string = "done all"; // assuming the last part finishes after 1 second Utilities.sleep(1000) return string; }Entonces querrá que sus llamadas en el lado del cliente se conecten en cascada:
function do1(element){ updateLocation.innerHTML = element; google.script.run.withFailureHandler(onFailure) .withSuccessHandler(do2) .updateTheUserP2(); }; function do2(element){ updateLocation.innerHTML = element; google.script.run.withFailureHandler(onFailure) .withSuccessHandler(onSuccess) .doStuff(); }; function onSuccess(element){ let result = element; updateLocation.innerHTML = result; }; google.script.run.withFailureHandler(onFailure) .withSuccessHandler(do1) .updateTheUserP1();Producción:
