使用Algolia官方提供的EventTracker类来替代中间件发送事件,并添加debouncing技术来防止重复发送事件。
代码示例:
import algoliasearch from 'algoliasearch/lite';
import { EventTracker } from '@algolia/autocomplete-js';
import debounce from 'lodash/debounce';
const searchClient = algoliasearch(
'APP_ID',
'API_KEY'
);
const eventTracker = new EventTracker({ searchClient });
const trackInputValue = debounce((query) => {
eventTracker
.track({
eventName: 'input',
index: 'INDEX_NAME',
query,
})
.catch((error) => {
console.error(error);
});
}, 500); // 添加debouncing,避免重复发送事件
const handleInput = (event) => {
const query = event.target.value;
trackInputValue(query);
};
// 在input元素上添加一个响应handleInput函数的事件监听器
document.querySelector('#search-input').addEventListener('input', handleInput);
在这个示例中,我们使用Algolia的官方EventTracker类来发送事件。我们还使用Lodash库中的debounce功能来添加一个debouncing阀值,以防止连续的事件发生(例如用户在快速输入时)并重复发送重复的请求。