Блог

Все это я использую этот код для печати 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 amp;amp; !stop; i  ) {
    // do PDF work here
    console.log(i);
    await timer(1500); 
  }
}
load();

function stopPrint(){
  stop = true;
}    

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

При использовании пользовательского класса promise код может выглядеть как эта живая демонстрация

 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