是否可以继续停止异步功能?

时间:2017-12-07 10:28:43

标签: javascript promise async-await

我正在尝试了解promises,我想知道如何启动和停止异步函数,就像我的示例show。当你点击按钮时,它从开始和停止开始,但似乎无法继续。

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>

1 个答案:

答案 0 :(得分:3)

停止/重新启动和暂停之间存在差异。您正在描述暂停和继续的功能。

如果您希望暂停/继续,则需要while循环继续运行并添加内部条件以检查您当前是否暂停。

您当然可以重新调用trabajar();重新启动,但重新启动并继续在逻辑上是2个不同的东西,重启可能想要清除现有输出而不是继续。

可能有很多方法可以做到这一点,但最快的演示暂停/继续以及停止/重启可以完成类似于下面的操作。再次,请随时重新致电trabajar();,但这取决于您。

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>