如何在同步功能中停止JavaScript中的功能？

如何解决如何在同步功能中停止JavaScript中的功能？

每个人我都使用此代码在横向模式下打印pdf，每侧打印出两个数据集，此功能运行良好，但现在我考虑使用停止按钮来停止此过程。

我坚持使用它，因此请提供一些建议。

在此先感谢您，这是我第一次在此平台上发布问题。

function timer(ms) {
                return new Promise(res => setTimeout(res,ms));
            }

            async function load() { // wrap the loop into an async function for this to work
                for (i = 0; i < sCustID.length; i++) {
                    var elem = document.getElementById("myBar");
                    document.getElementById("pdfhead").innerHTML = qrtype;
                    document.getElementById("QRCODEID").innerHTML = sCustID[i];
                    document.getElementById("NAME").innerHTML = sName[i];
                    qrinput[i] = sCustID[i] + "," + sName[i] + "," + sType[i];
                    generateQRCode(qrinput[i]);
                    document.getElementById("printed").innerHTML = i;
                    document.getElementById("pdfhead2").innerHTML = qrtype;
                    document.getElementById("QRCODEID2").innerHTML = sCustID[i + 1];
                    document.getElementById("NAME2").innerHTML = sName[i+1];
                    qrinput[i+1] = sCustID[i+1] + "," + sName[i+1] + "," + sType[i+1];
                    generateSecQRCode(qrinput[i + 1]);
                    document.getElementById("printed").innerHTML = i + 1;
                    PdfFDesignModal.style.display = "block";
                    TimerModal1.style.display = "block";
                    width = ((i+1) * 100) / totalprint1;
                    elem.style.width = width + '%';
                    i = i + 1;
                    savePdf(sCustID[i + 1]);
                    if (i  == sCustID.length) {
                        alert("All QRCODE Printed");
                        PdfFDesignModal.style.display = "none";
                        TimerModal1.style.display = "none";
                    }
                    await timer(1500); // then the created Promise can be awaited
                }
            }
            load();

        }

解决方法

设置一个带有侦听器的按钮，该侦听器调用一个函数来设置全局变量。然后在for循环中将该变量作为条件测试的一部分进行测试。

由于for循环的异步特性，这将起作用。致电stopPrint()将有机会中断该过程

let stop = false;
document.getElementById('stop').addEventListener('click',stopPrint);

function timer(ms) {
  return new Promise(res => setTimeout(res,ms));
}

async function load() { 
  for (i = 0; i < 10 && !stop; i++) {
    // do PDF work here
    console.log(i);
    await timer(1500); 
  }
}
load();

function stopPrint(){
  stop = true;
}  

<button id='stop'>Stop</button>

,

使用自定义的Promise类时，代码可能像这样live demo

import CPromise from "c-promise2";

async function yourAsyncTask(i) {
  //some async code here
  console.log(`Task [${i}]`);
  return 123;
}

function load() {
  return CPromise.from(function* () {
    this.innerWeight(20); // for progress capturing,can be omitted
    for (let i = 0; i < 10; i++) {
      yield yourAsyncTask(i); //use yield with promises instead of await here
      yield CPromise.delay(1000); // I don't know why you need a delay
    }
  });
}

const cancelablePromise = load()
  .progress((value) => console.log(`Progress: ${value * 100}%`)) // just for fun let's capture progress
  .then(
    () => console.log("Done"),(err) => console.log(`Fail: ${err}`)
  );

setTimeout(() => {
  cancelablePromise.cancel(); // abort async sequence
},3500);

控制台输出：

Task [0] 
Progress: 5%
Progress: 10%
Task [1] 
Progress: 15%
Progress: 20%
Task [2] 
Progress: 25%
Progress: 30%
Task [3] 
Progress: 35%
Fail: CanceledError: canceled