Estoy haciendo una función de verificación de números primos en js. Quiero dejar que el textContent de texto del estado muestre 'procesamiento' cuando la función se está ejecutando (encontrando un número primo). Sin embargo, mi código ya no funciona.
Aquí está mi código:
let start = performance.now() let time = document.getElementById('time') let texts = document.getElementById('texts') let amount = document.getElementById('amount') let status = document.getElementById('status') function checkprimenumber(){ let start = performance.now() let value = texts.value if(value ==''){ value = texts.placeholder; } for (let i = 0;i<value;i++){ time.textContent = '' amount.textContent = '' var nums = 2; for (let x = 0;x<=i/2;x++){ if(nums>3){ break; } if(i!==0 && i!==1 && i !== x){ if(i%x === 0){ nums++; } } } if(nums === 3){ amount.textContent = parseFloat(amount.textContent)+1 } if(i === value-1){ status.textContent = 'done' console.log('got it') let end = performance.now() time.textContent = (end-start).toFixed(3) } } } checkprimenumber() <h1>Get Prime number application:</h1> <h2>Prime Number: <span></span></h2> <h3>Processing Time: <span id = 'time'>0</span> ms</h3> <h3>Number: <span id = 'amount'>0</span></h3> <h3>Status: <span id = 'status'>Processing</span></h3> <label for = 'texts'>Enter the range you want to get number from</label> <input type = 'text' id = 'texts' placeholder = '100000'> <input type = 'button' id = 'button' value = 'set' onclick = 'checkprimenumber()'>status.textContent nunca muestra 'procesamiento' a pesar de que ingreso un número muy grande.¿Por qué pasó esto?
Para el amount.textContent , lo que espero es que se pueda agregar cuando se ejecuta la function . Sin embargo, la cantidad. amount.textContent solo devuelve la cantidad cuando la function termina de ejecutarse.
¿Alguien sabe por qué ocurre este problema?
He estado luchando con esto durante bastante tiempo.
Gracias por cualquier respuesta y apoyo.
La interfaz de usuario no se actualizará hasta que javascript termine de ejecutarse. Una forma de darle tiempo para actualizar la interfaz de usuario es usando setTimeout();
let start = performance.now(); let time = document.getElementById('time'); let texts = document.getElementById('texts'); let amount = document.getElementById('amount'); let status = document.getElementById('status'); function checkprimenumber() { status.textContent = 'processing'; // execute the calculation later, leaving time for the GUI to update. setTimeout(function(){ reallycheckprimenumber(); }, 10); } function reallycheckprimenumber() { let start = performance.now(); let value = texts.value; if (value == '') { value = texts.placeholder; } for (let i = 0; i < value; i++) { time.textContent = '' amount.textContent = '' var nums = 2; for (let x = 0; x <= i / 2; x++) { if (nums > 3) { break; } if (i !== 0 && i !== 1 && i !== x) { if (i % x === 0) { nums++; } } } if (nums === 3) { amount.textContent = parseFloat(amount.textContent) + 1; } if (i === value - 1) { status.textContent = 'done'; console.log('got it'); let end = performance.now(); time.textContent = (end - start).toFixed(3); } } } checkprimenumber(); <h1>Get Prime number application:</h1> <h2>Prime Number: <span></span></h2> <h3>Processing Time: <span id = 'time'>0</span> ms</h3> <h3>Number: <span id = 'amount'>0</span></h3> <h3>Status: <span id = 'status'>Processing</span></h3> <label for = 'texts'>Enter the range you want to get number from</label> <input type = 'text' id = 'texts' placeholder = '100000'> <input type = 'button' id = 'button' value = 'set' onclick = 'checkprimenumber()'>UI es la interfaz de usuario. setTimeout hace que el código se ejecute más tarde en lugar de inmediatamente. ( https://www.w3schools.com/jsref/met_win_settimeout.asp ). Si el código se ejecuta inmediatamente, la interfaz de usuario no se actualizará porque el navegador está ocupado ejecutando el código. Configurarlo para que se ejecute más tarde significa que el código deja de ejecutarse brevemente, la interfaz se actualiza y luego el código se ejecuta nuevamente más tarde.