Estoy tratando de acelerar mi html en la entrada cuando el usuario ingresa algunas palabras en el campo de búsqueda, debe haber un rediseño del bloque. Cuando implementé la función de aceleración en mi código, la búsqueda en vivo dejó de funcionar, ahora no se vuelve a dibujar la tarjeta
searchInput.addEventListener('input', (event: Event) => { searchTerm = (event.target as HTMLTextAreaElement).value.toLowerCase(); throttle(() => { showList(); }, 100); }); function throttle(func: Function, ms: number) { let isThrottled: boolean = false; let savedArgs: any, savedThis: any; function wrapper(this: any) { if (isThrottled) { savedArgs = arguments; savedThis = this; return; } func.apply(this, arguments); isThrottled = true; setTimeout(() => { isThrottled = false; // (3) if (savedArgs) { wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; } }, ms); } return wrapper; }Su throttle devuelve una función. Llamaste a throttle() pero no usaste la función que devuelve.
deberías hacer algo así
const throttledShowList = throttle(showList, 100); // <-- Add this searchInput.addEventListener('input', (event: Event) => { searchTerm = (event.target as HTMLTextAreaElement).value.toLowerCase(); throttledShowList(); // <-- Replace the previous throttle() call with this }); function throttle(func: Function, ms: number) { let isThrottled: boolean = false; let savedArgs: any, savedThis: any; function wrapper(this: any) { if (isThrottled) { savedArgs = arguments; savedThis = this; return; } func.apply(this, arguments); isThrottled = true; setTimeout(() => { isThrottled = false; // (3) if (savedArgs) { wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; } }, ms); } return wrapper; }De esa manera, define una versión limitada de su función que llama en la entrada