Why function in a loop is working only once?

Question

I'm working on a progressbar with Google App Script and JQuery. When I click on submit, the following code run:

    var i=0;
    while (i<100){
      var prog=google.script.run.countTime();
      i+=prog;
      button.progressIncrement(i);
    }

The progressbar is only feeded at 10% and the execution is stopped.

The countTime() function is not very important (only returns 10 for the moment):

function countTime(){
   return 10;
}

But if I remove the function, it works (100%):

 while (i<100){
    var prog=10;
    i+=prog;
    button.progressIncrement(i);
 }

If I remove my loop and write something like this:

    var i=0;
    var prog=google.script.run.countTime();
    i+=prog;
    button.progressIncrement(i);
    var prog=google.script.run.countTime();
    i+=prog;
    button.progressIncrement(i);
    var prog=google.script.run.countTime();
    i+=prog;
    button.progressIncrement(i);
    var prog=google.script.run.countTime();
    i+=prog;
    button.progressIncrement(i);
    var prog=google.script.run.countTime();
    i+=prog;
    button.progressIncrement(i);
    (....)

The progressbar works to 100% too.

What is wrong with the function inside the while?

Answer 1

google.script.run() doesn't return a value, it runs asynchronously. You pass it a callback function to get a value back from it via withSuccessHandler(). For example in your client side code:

function onSuccess(valueFromServer) {

    // do something with valueFromServer
}

google.script.run.withSuccessHandler(onSuccess).doSomethingServerSide()

And server side:

function doSomethingServerSide() {
    return valueFromServer
}