Estoy procesando un número desconocido de elementos en un bucle. El procesamiento de cada elemento lleva un tiempo variable. Como la operación general es larga y para darle más control al usuario final, quiero proporcionar un botón de pausa.
Los elementos a procesar son proporcionados por una función de generador de terceros y no puedo modificarlos. Por lo tanto, se desconoce el número total de elementos.
El siguiente es mi intento de implementar la función:
let processed = 0; let paused = false; let resume = () => {}; // a third party function, which I can't modify async function* getItems() { for (;;) yield 1; } // placeholder for a lengthy operation async function process(item) { return new Promise(resolve => setTimeout(resolve, 1000)); } // is this a better way to implement pause? async function enforcePause() { if (paused) return new Promise(resolve => {resume = resolve}); else return Promise.resolve(); } btn.addEventListener('click', () => { if (paused) { resume(); paused = false; btn.textContent = 'Pause'; } else { paused = true; btn.textContent = 'Resume'; } }); // a lengthy operation async function processAll() { for await (let item of getItems()) { await process(item); counter.textContent = ++processed; await enforcePause(); } } processAll(); <p>Progress: <span id="counter">0</span></p> <button id="btn">Pause</button>Mis consultas son: