Tengo un conjunto de listas con casillas de verificación, cuando hago clic en 5 casillas de verificación, se muestra un mensaje de alerta, felicitaciones, ha seleccionado 5 opciones. Tengo que hacer la validación usando la promesa. Si no estoy usando rechazar, está funcionando bien. Pero si agrego el código como se indica a continuación, se ejecuta el código de 'rechazo' y se muestra el error como 'indefinido'. ¿Dónde me he equivocado?
let clickvalidation = new Promise(function(resolve, reject) { $('input[type=checkbox][id=chk1]').change(function() { if ($(this).is(':checked')) { noOfClick++; if (noOfClick == 5) { resolve(); } else { reject(); } } }); }); clickvalidation .then(function() { console.log('Success, You are a GEEK'); alert(`Congrats 5 tasks have been successfully completed`); }) .catch(function(e) { console.log(e.stack); });Una promesa sólo puede resolverse una vez .
La primera vez que cambia la casilla de verificación, llama al reject() y no le pasa ningún argumento (por lo que genera un error con un mensaje undefined ).
Cada vez que cambie la casilla de verificación, llamará a reject o resolve , pero la promesa ya no estará pendiente.
Las promesas son una buena herramienta para avisarte cuando tienes un resultado. No están diseñados para proporcionar múltiples resultados.
Esta no es una situación en la que las promesas sean una herramienta útil. Simplemente use un controlador de eventos regular por sí mismo.
let counter = 0; document.querySelector('input').addEventListener('change', () => { counter += 1; }); document.querySelector('button').addEventListener('click', () => { if (counter === 5) { console.log("OK"); } else { console.log("Not OK"); } }); <input type="checkbox"><button>OK</button>