Привет всем! Помогите, пожалуйста, с вопросом про eventы. Использую TypeScript

Question

Привет всем! Помогите, пожалуйста, с вопросом про eventы. Использую TypeScript

и React.js
Задача: мне нужно на hover показывать перевод слова, для этого eventListener обращается к АПИ словаря. Мне бы хотелось делать запросы, только если юзер оставляет мышку на слове в течение какого-то времени.
Я попробовала в MouseEnter делать setTimeout, а в MouseLeave очищать его:
MouseEnter:
if (hintText === "") {
filterTimer = setTimeout(() => {
positionHint();
getTranslation(props.word).then(data => setHintText(data[0]));
}, 1000);
MouseLeave:
if (filterTimer !== null) {
clearTimeout(filterTimer);
}

Видимо, я что-то упускаю и в Network я всё равно вижу запросы, даже если мышка уже не там. Как можно избежать обращения к API, если мышки уже нет на элементе? Спасибо:)

#javascript #programming #russian

0

29.03.2020

1 ответов

20 просмотров

Роман · Accepted Answer

Роман

Попробуй каждые 100мс записывать в счётчик с помощью колбэка. А затем, если накопилось определенное время - делать обращение к апи. Так же можно запомнить на каком элементе ты считал - и при уводе мышки с этого элемента - очистить счетчик

0

29.03.2020

169 похожих чатов

Привет всем! Помогите, пожалуйста, с вопросом про eventы. Использую TypeScript

1 ответов

Похожие вопросы