Waiting for the user to finish writing

[Drigtime]

Hi, I follow the guide to populate my sources with async data, which work great but there a problem.
Every time I add a character to the query it instantly make a new request to the backend, so if I type "test" it will trow 4 requests at the same time, and what can append is that last request finish first and the data retrieved get overwrited by next query to finish..
Is the a way to juste "wait" like 1 second after the user stop writing and then trigger the getSources ? Or just to stop the previous request made to only take the result of the last request ?

Here is my autocomplete setup :

autocomplete({
    container: '#autoComplete_wrapper',
    placeholder: 'Chercher par nom, téléphone, email, fonction',
    getSources({ query }) {
        return axios(searchWrapper.dataset.searchQuery + "?query=" + query)
            .then(res => {
                // const formattedData = data.
                return [
                    {
                        sourceId: 'Agents',
                        getItems() {
                            return res.data
                        },
                        getItemUrl({ item }) {
                            return item.id;
                        },
                        templates: {
                            item({ item }) {
                                return `${item.displayname} - ${item.title}`;
                            },
                        },
                    }
                ]
            })
    },
    onStateChange({state}) {
        console.log(state.status);
    }
});

[francoischalifour]

Hey! You can debounce the promise in getSources, like we're doing in this example:

autocomplete/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx

Lines 24 to 41 in e019b4d

	function debouncePromise<TParams extends unknown[], TResponse>(
	fn: (...params: TParams) => Promise<TResponse>,
	time: number
	) {
	let timerId: ReturnType<typeof setTimeout> | undefined = undefined;
	return function (...args: TParams) {
	if (timerId) {
	clearTimeout(timerId);
	}
	return new Promise<TResponse>((resolve) => {
	timerId = setTimeout(() => resolve(fn(...args)), time);
	});
	};
	}
	const debouncedFetch = debouncePromise(fetch, 300);

[Drigtime]

Nice it work perfectly thank you very much 👍