Как отправить акцию с задержкой (debounce) - PullRequest
Новая
       32

Как отправить акцию с задержкой (debounce)

2 голосов
/ 01 ноября 2019

У меня есть сценарий, в котором мне нужно отправить действие через две секунды после завершения ввода. (Допустим, пользователь вводит 1000 без интервала в 2 секунды, поэтому мне нужно отправлять действие только после того, как набрано 1000, и через 2 секунды после него).

Ранее я использовал debounce-prom чтобы сделать такую ​​вещь, где мне нужно было получить выпадающий список из API, но для этого я напрямую использовал библиотеку с вызовом AJAX в компоненте. Это сработало правильно.

Теперь мне нужно отправить подобное действие. 

  // should be dispatched only for the last request
  const getRateReq = dispatch(getRates());

  const getRate = debounce(getRateReq, 2000, {
    leading: false,
  });

  const onChange = (e) => {
     setValue(e.target.value);
     getRate(e.target.value);
  }

Теперь также действие отправляется только через две секунды после завершения ввода. Но затем он выполняет все запросы на 1, 10, 100, 1000 (даже если 1000 вводится без интервала в две секунды). Как я могу исправить это и отправить действие только для последнего ввода в 2 секунды?

Любая помощь будет оценена. Спасибо

РЕДАКТИРОВАТЬ: Добавлена ​​базовая функция onChange

Ответы [ 2 ]

3 голосов
/ 01 ноября 2019

вы можете сделать что-то вроде этого. 

let timeOut = null;
SearchFilter: (name, value) => {
    clearTimeout(timeOut);
    dispatch(SearchFilter(name, value));
    timeOut = setTimeout(() => {
            dispatch(callfunction());
        }, 2000);
    }

будет отправлять действие, ожидающее 2 секунды ввода.

1 голос
/ 01 ноября 2019

Вам нужно использовать метод debounce в loadash и сделать что-то вроде: 

onChange = debounce(anyInput => {
    }, 2000);

, поэтому вы должны выполнить вызов API в методе onchange, когда закончите ввод текста и через 2 секунды после этого. Не уверен, что это то, что вы спрашиваете?

...