Дроссель не работает при использовании хуков setState - PullRequest
Новая
       33

Дроссель не работает при использовании хуков setState

0 голосов
/ 16 мая 2019

Я столкнулся с проблемой при использовании дроссельной заслонки.Используя код ниже, дроссель работает правильно.Но что-то идет не так, когда я раскомментирую setPosition([e.clientX, e.clientY]).Дроссель сломан и position обновляется немедленно, не дожидаясь 1 секунды. 

import React, { useState } from 'react'
import { throttle } from 'lodash'

export default () => {
  const [position, setPosition] = useState([0, 0])
  const [x, y] = position

  const handleMouseMoveThrottle = throttle(e => {
    console.log(e.clientX, e.clientY)
    // setPosition([e.clientX, e.clientY])
  }, 1000)

  const handleMouseMove = e => {
    e.persist()
    handleMouseMoveThrottle(e)
  }

  return (
    <div
      style={{ width: 300, height: 300, border: 'solid 1px black' }}
      onMouseMove={handleMouseMove}
    >
      <div>
        Position: {x}, {y}
      </div>
    </div>
  )
}

Есть ли решение?

1 Ответ

1 голос
/ 16 мая 2019

Поведение lodash throttle по умолчанию - запуск немедленно и в конце установленного времени (если событие вызывается более одного раза за это время).Чтобы получить желаемое поведение, вам нужно передать опции своему вызову газа. 

const handleMouseMoveThrottle = throttle(e => {
    console.log(e.clientX, e.clientY)
    // setPosition([e.clientX, e.clientY])
  }, 1000, { leading: false }); // this says, do not run the function immediately

По умолчанию leading имеет значение true, другой параметр, trailing, этотакже установите на true.

Проверьте это:

https://lodash.com/docs/4.17.11#throttle

и это:

https://github.com/lodash/lodash/blob/master/throttle.js#L52

для получения дополнительной информации

...