Is it possible continue a stopped async function?

Question

I'm trying to learn about promises, and I wonder about to start and stop an async function, like my example show. It starts at the begining and stop when you click the button, but it seems can't continue.

var stop = 0;
var elParrafo = document.getElementById('miParrafo');

function sendStop() {
  stop = 1;
}

function sendStart() {
  stop = 0;
}

function esperar(ms) {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, ms)
  });
}

async function trabajar() {
  while (stop === 0) {
    elParrafo.innerHTML += " > ";
    await esperar(50);
  }
}

trabajar();

<form class="" action="index.html" method="post">
  <input type="button" value="Stop" onclick="sendStop()">
  <input type="button" value="Start" onclick="sendStart()">
</form>
<p id="miParrafo"></p>

Your code does not stop a Promise. It just stops firing new ones. You can stop/start your loop by calling the `trabajar` again, but a Promise cannot be cancelled. — Gabriele Petrioli, Dec 07 '17 at 10:43

Nope · Accepted Answer · 2017-12-07T11:00:43.600

There is a difference between stopping/restarting and pausing. You are describing the feature to pause and to continue.

If you wish to pause/continue you need the while loop to keep running and add an internal condition to check if you are currently paused or not.

You could off course just re-call trabajar(); to restart but restarting and continuing is logically 2 different things and a restart might want to clear the existing output while continue does not.

There is probably many ways to do this but the quickest to demonstrate pause/continue as well as stop/restart can be done similar to the below. Again, feel free to just re-call trabajar(); but that is up to you.

var stop = false;
var pause = false;
var elParrafo = document.getElementById('miParrafo');

function sendPause() {
  pause = true;
}

function sendContinue() {
  pause = false;
}

function sendStop() {
  stop = true;
}

function sendRestart() {
  sendStop();
  setTimeout(function() {
    stop = false;
    pause = false;
    elParrafo.innerHTML = "";
    trabajar();
  }, 50)
}

function esperar(ms) {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, ms)
  });
}

async function trabajar() {
  while (!stop) {
    if (!pause) {
      elParrafo.innerHTML += " > ";
    }
    await esperar(50);
  }
}

trabajar();

<form class="" action="index.html" method="post">
  <input type="button" value="Pause" onclick="sendPause()">
  <input type="button" value="Continue" onclick="sendContinue()">
  <input type="button" value="Stop" onclick="sendStop()">
  <input type="button" value="Restart" onclick="sendRestart()">
</form>
<p id="miParrafo"></p>

Thank you very much! That's probably what I really wanted to do. — Jesús Abad, Dec 07 '17 at 10:53
I don't need the "Restart" function, but I was thinking about it and I don't know what's the matter (inside the memory) with the Promise when you doesn't "Stop" it but "Restart" it again and again, if you erase the "sendStop()" inside it. — Jesús Abad, Dec 07 '17 at 11:15
This is only an example, you can take which ever code you need for yourself and apply it to fit your need. If you don't stop the promise and restart it it will add a new instance of the promise over and over, hence your HTML update gets faster and faster. You need to stop it first. I added the setTimeout in the example to ensure the promise gets to stop. Again, this is just a quick demo/example. — Nope, Dec 07 '17 at 11:35
I have a new problem, very similar to this one, but different. How do I ask it? — Jesús Abad, Dec 07 '17 at 12:24
I've created a new question: https://stackoverflow.com/questions/47695364/is-it-possible-continue-a-paused-async-function-2 — Jesús Abad, Dec 07 '17 at 12:42

Is it possible continue a stopped async function?

1 Answers1

Linked