On my sidebar, there are two buttons button1 and button2. What I want is, after button1 is clicked then myfunction() will run simultaneously button2 is disabled. When myfunction() ends, button2 switches to enable state. I used the following code:
$(document).ready(function(){
$("#button1").click(function(){
google.script.run.myfunction();
$("#button1").attr("disabled",true);
$('#button2').attr("disabled", false);
});
});
});
However, when button1 is clicked, the function myfunction() runs and button2 is also enabled. This causes the user to click button2 while the function is running, resulting in an error. Can anyone help me? Thanks in advance.
This looks like a job for Promises. Use async-await to achieve this.
google.script.run.myfunction should be an async call.
Disable your button before the function is run. Then in the second line, we wait for the result from myfunction execution. Later, we toggle the disabled attribute.
$(document).ready(function(){
$("#button1").click(async function(){
$("#button1").attr("disabled",true);
let newVal = await google.script.run.myfunction();
$('#button2').attr("disabled", false);
});
});
});