Estoy tratando de integrar el rebote en una entrada de búsqueda para poder buscar en los datos obtenidos (después de obtener los datos) con el término completo, tengo esta función de rebote en App.js :
debounce = (callback, delay) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => callback(...args), delay); } } debouncedTerm = this.debounce(text => console.log(text), 300);También tengo este método en App.js
onSearchChanged = data => { const searchBar = data.target.value.toLowerCase(); this.debouncedTerm(searchBar) this.setState({ searchBar: searchBar, }, () => { let newData = {...this.state}; if( typeof this.props.source !== "undefined"){ newData.source = this.props.source } newData.params = { searchBar : this.state.searchBar } Api.fetchQuestions(newData.params) .catch( error => { if (typeof error.message !== "undefined"){ newData.config.formMessage = { message : error.message, success : false, } newData.widgetStatus = false; this.setState(newData) } return {data:{data:[]}} }) .then( response => { if(response.data.status === 'success'){ return response.data.data; } this.setState({ questions: [...response.data.questions.items], loading: false }); }) }); };FYI: paso el valor de la entrada (barra de búsqueda) como parámetro en newData.params
'URL/questions?client_id='+params.client_id+'&term='+params.searchBar,¿Cómo puedo integrar debouncedTerm en el método onSearchChanged?
Tengo la entrada de búsqueda en un componente secundario.
<InputSearch type="search" placeholder="Search" onChange={props.searchCallback} />esta es una parte del código que escribí recientemente:
export function debounceFetch(fn, delay) { let createdTimeout; let controller; function onCancel() { controller?.abort(); createdTimeout?.cancel(); } async function debounced(...args) { onCancel(); controller = new AbortController(); createdTimeout = timeout(delay); await createdTimeout.delay; return fn(...args, controller.signal); } return [ debounced, onCancel, ]; }También cancela la solicitud de recuperación, y esta es la parte del tiempo de espera:
function timeout(ms) { let timeoutRef; let rejectRef; const delay = new Promise((resolve, reject) => { timeoutRef = setTimeout(() => { resolve('timeout done'); }, ms); rejectRef = () => { reject(new Error('cancel timeout')); }; }); return { delay, cancel() { clearTimeout(timeoutRef); rejectRef(); }, }; }