Задержка Реакции на событие onMouseOver - PullRequest
Новая
       22

Задержка Реакции на событие onMouseOver

0 голосов
/ 22 мая 2018

У меня есть список элементов, при наведении одного из них я хотел бы изменить свое состояние.

<ListElement onMouseOver={() => this.setState({data})}>Data</ListElement>

К сожалению, если я наведу указатель мыши на список, мое состояние меняется несколько раз в быстрой последовательности.Я хотел бы отложить изменение состояния, чтобы оно подождало полсекунды, прежде чем его уволили.Есть ли способ сделать это?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вы можете создать метод, который будет запускать событие onMouseOver при соответствии особым требованиям.

В следующем примере оно срабатывает после 500 ms. 

/**
 * Hold the descriptor to the setTimeout
 */
protected timeoutOnMouseOver = false;

/**
 * Method which is going to trigger the onMouseOver only once in Xms
 */
protected mouseOverTreatment(data) {
   // If they were already a programmed setTimeout
   // stop it, and run a new one
   if (this.timeoutOnMouseOver) {
     clearTimeout(this.timeoutOnMouseOver);
   }

   this.timeoutOnMouseOver = setTimeout(() => {
      this.setState(data);

      this.timeoutOnMouseOver = false;
   }, 500);
}
0 голосов
/ 22 мая 2018

Вы можете использовать debounce в качестве выделенного пакета или получить его от lodash и т. Д .:

Полезно для реализации поведения, которое должно происходить только после повторного действиязавершено. 

const debounce = require('debounce');

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.debouncedMouseOver = debounce(handleMouseOver, 200);
  }

  handleMouseOver = data => this.setState({ data });

  render() {
    const data = [];
    return <ListElement onMouseOver={() => this.debouncedMouseOver(data)}>Data</ListElement>;
  }
}
...