¡Hola soy Juan!
Mientras estaba trabajando en un proyecto ‘secreto’ 😏 me surgió un problemilla y es que necesitaba detectar cuando el usuario dejaba de escribir en un input para poder hacer una petición ajax, esto con el fin de o hacer la petición cada vez que presionará una tecla, entonces lo primero que hice fue buscar un código que quizá ya habrían hecho para esto, hallé una librería pero no quería usar una Librería para ello, puesto pensé que no sería algo extraordinario, luego encontré un código pero se usaba un setInterval el cual lo implementé y no satisfacía mi necesidad, así que lo modifiqué un poco en esta ocasión usando mejor un setTimeout el cual a la final, funcionó de maravilla dejo el código por si te interesa o lo necesitas.
Si tienes una forma mucho más sencilla y/o eficiente de hacerlo o si tienes una mejora para el código estaré encantado de leer tu FeedBack.
<input type="text" id="comment" />
let $comment = document.getElementById("comment")
let timeout
//El evento lo puedes reemplazar con keyup, keypress y el tiempo a tu necesidad
$comment.addEventListener('keydown', () => {
clearTimeout(timeout)
timeout = setTimeout(() => {
console.log('Has dejado de escribir en el input')
clearTimeout(timeout)
},1000)
})
Excelente aporte, muchas gracias
", "markdown_content": "Excelente aporte, muchas gracias", "created_at": "2023-04-29T18:26:06.548141Z", "deep": 0, "n_responses": 0, "n_stars": 1, "parent_id": null, "ai_generated": false}, "4122433": {"id": 4122433, "object_id": "2575", "object_type": "contribution", "author_id": 2595888, "comments": [], "content": "Muy bien!
", "markdown_content": "Muy bien!", "created_at": "2022-09-29T08:00:59.453300Z", "deep": 0, "n_responses": 0, "n_stars": 1, "parent_id": null, "ai_generated": false}}; window.course = {"name": "Fundamentos de JavaScript 2017", "slug": "fundamentos-javascript-2017", "id": 1099, "badge": "https://static.platzi.com/media/achievements/badge-Fundamentos-js.png", "paid": true}; window.career = {"name": "Apps Multiplataforma", "color": "#5fa400", "url": "/learning-path/multiplataforma/"}; window.firstComments = [5075875, 4741502, 4122433]; window.stars = {"comments": [], "contribution": [], "related_posts": []}; window.messages = {"discussion": {"responsesTo": "Tutoriales de"}, "popups": {"login": {"welcome": "Bienvenido a Platzi", "loginFacebook": "Ingresa con facebook", "loginTwitter": "Ingresa con Twitter", "loginMail": "\u00bfIngresas con email?", "haveAccount": "\u00bfA\u00fan no tienes cuenta?", "signup": "Reg\u00edstrate aqu\u00ed", "privacy": {"part1": "Valoramos tu", "part2": "privacidad", "part3": "como si fuera nuestra"}, "terms": {"part1": "Ante cualquier duda, nuestros", "part2": "Terminos de servicio"}}, "pay": {"buyPlan": "Comprar Plan", "monthly": {"label": "En 12 pagos sin intereses"}}}, "response": {"time": "hace", "respond": "Escribe tu respuesta", "hideResponses": "Ocultar respuestas", "numberOfResponses": "{number} respuestas", "responseOf": "{number} respuesta", "delete": "Eliminar"}, "form": {"placeholder": "Deja tu comentario", "editor": {"placeholder": "Escribe tu pregunta", "edit": "Editar", "preview": "Vista previa", "expand": "Expandir", "contract": "Contraer", "bold": "Negrita", "italic": "Cursiva", "underline": "Subrayado", "heading": "Encabezado", "code": "Insertar c\u00f3digo", "quote": "Cita", "link": "Enlace", "unorderedList": "Lista desordenada", "orderedList": "Lista ordenada", "image": "Imagen", "youtube": "Youtube", "uploading": "Subiendo imagen"}, "buttons": {"send": "Enviar", "sending": "Enviando", "cancel": "Cancelar"}, "helpbar": {"markdown": "Markdown", "preview": "Vista previa"}, "bottom": {"title": "T\u00edtulo"}}, "access.now": "ver clase", "post.related": "Entradas relacionadas", "start.now": "ver clase sin costo", "banner": {"message": "Estas respuestas son parte del {course}.
Hola Juan, le agregué unas pequeñas mejoras al código.
Validaciones de espacios vacíos (no queremos que sature al servidor con valores no válidos).
if (e.target.value.trim() === "") return;
En este escenario timeout funciona mejor con el evento “keyup” que es cuando se suelta la tecla.
Como buena práctica, cuando agregues un eventListener evita usar funciones anónimas porque en ocasiones tienes que eliminar el elemento dinámicamente, y si usas la función
$comment.RemoveEventListener("keyup", listener?)
El parametro listener es la función, pero como es una funcion anonima no tiene una referencia en memoria, en tu primera versión no podrias removerlo.<inputtype="text"id="comment" /><script>let timeout; const $input_text = document.querySelector("#comment"); $input_text.addEventListener("keyup", callApi); functioncallApi(e) { // Si es vacio entonces termina la ejecucionif (e.target.value.trim() === "") return; console.log({ value: e.target.value }); clearTimeout(timeout); timeout = setTimeout(() => { console.log(`request to API '${e.target.value}'`); clearTimeout(timeout); }, 1000); } </script>
Excelente aporte, muchas gracias
Muy bien!