Vi este video en https://www.youtube.com/watch?v=cjIswDCKgu0&t=429s YouTube;
Solo quería hacer una función de rebote simple. pero este código no funciona en mi dispositivo según lo previsto. Por favor ayuda.
let debounceTimes = 0; // this code does not work as intended let timeout; // if I make it global it works just fine // but I don't want to do that for obvious reasons function debounce(cb, delay = 100) { // let timeout; // this is being reinitialized // only if I could do something like this // static timeout; // to avoid re-initializing the variable // return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => { cb(); }, delay); // } } window.addEventListener("mousemove", () => { // console.log("hello"); // document.getElementById("debounce").innerText++; debounce( () => { debounceTimes++; document.getElementById("debounce").innerText = String(debounceTimes); }, 100); });
En este ejemplo, no es posible, ya que cuando se activa el evento, solo ejecuta la función de debounce que crea la variable interna. Para evitar reinicializar la variable, puede:
Crear variable en el alcance global
Cree otra función que devuelva la función de rebote (para que el tiempo de espera esté oculto en el alcance de la función)
let debounceTimes = 0; function getDebounce() { let timeout; function debounce(cb, delay = 100) { clearTimeout(timeout); timeout = setTimeout(() => { cb(); }, delay); } return debounce; } const debounce = getDebounce(); window.addEventListener('mousemove', () => { debounce(() => { debounceTimes++; document.getElementById('debounce').innerText = String(debounceTimes); }, 100); });Un buen patrón en JS cuando desea que una variable sea privada para una función, pero aún fuera de su alcance, es usar cierres e IIFE :
const debounce = (function() { let debounceTimes = 0; let timeout; // if I make it global it works just fine // but I don't want to do that for obvious reasons return (cb, delay = 100) => { clearTimeout(timeout); timeout = setTimeout(() => { cb(); console.log("Count:", debounceTimes) debounceTimes++ }, delay); } })() window.onmousemove = () => debounce(() => console.log("Debounced"),200)Terminé creando una clase con método estático y variables, ya que era similar a las formas de hacer las cosas de C++. pero me gusta más la respuesta de @Tomasz Staszkiewicz. Hizo otra función dentro de la función para lograr esto.
class ignoreInput { static #timeout; static debounce (cb, delay = 100) { clearTimeout(this.timeout); this.timeout = setTimeout(() => { cb(); } , delay); } static throttle (cb, delay = 100) { // some code } };