[英]How can I make a button a loading button as long as the function is executed?
Initial situation初始情况
Problem问题
When starting the function via the sidebar, no message is shown that the function has been started - unlike when starting the function directly or via a custom menu.通过侧边栏启动 function 时,不会显示 function 已启动的消息 - 这与直接或通过自定义菜单启动 function 不同。
This can confuse the user because he clicks and nothing happens at first.这可能会使用户感到困惑,因为他点击了但一开始什么也没有发生。
I don't know if this is generally the case with a sidebar, that no indication of the executing function is displayed, or if this has something to do with the event that triggers the function:我不知道这是否是侧边栏通常的情况,没有显示执行 function 的指示,或者这是否与触发 function 的事件有关:
<button onclick="google.script.run.myFunction()" class="button is-link"></button>
My idea我的想法
Bulma CSS also has a loading button: <button class="button is-loading">Loading</button>
Bulma CSS 还有一个加载按钮:
<button class="button is-loading">Loading</button>
My idea is that when a button is clicked and the function starts, that the button then becomes the loading button.我的想法是,当单击一个按钮并启动 function 时,该按钮将变为加载按钮。 As long as the function is working.
只要 function 正常工作。 When the runtime of the function ends, the loading button should become a normal button again.
当 function 的运行结束时,加载按钮应该再次变成普通按钮。
What is the best way to implement this?实现这个的最佳方法是什么?
In your situation, how about the following sample script using withSuccessHandler
?在您的情况下,使用
withSuccessHandler
的以下示例脚本怎么样?
function myFunction() {
Utilities.sleep(1000);
return "ok";
}
<button onclick="run()" id="button" class="button is-link">button</button>
<script>
function run() {
const button = document.getElementById("button");
button.className = "button is-loading"
google.script.run.withSuccessHandler(e => {
console.log(e); // Here, you can see the returned value.
button.className = "button is-link";
}).myFunction();
}
</script>
button is-loading
.button is-loading
状态。 When myFunction
of Google Apps Script is finished, the button is changed to the initial situation of button is-link
.myFunction
完成后,按钮会变成初始状态button is-link
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.