Как повысить производительность, если события onChange запускаются несколько раз в секунду

Question

У меня есть компонент пользовательского интерфейса диапазона.Пользователь может перетащить компонент пользовательского интерфейса диапазона MIN / MAX, и обратный вызов может вызываться много раз за одну секунду.Однако каждое изменение будет включать в себя удаленный вызов API.

Есть ли лучший способ улучшить это?Спасибо

handlePingRange(data){
    this.props.updateFilter("minPing", data[0])
    this.props.updateFilter("maxPing", data[1])
}



<div className="form-group col-md-4">
    <Range allowCross={false} value={this.state.pingRangeValues} step={5}  className="form-control-range"  onChange={this.handlePingRange.bind(this)} />
</div>

Answer 1

Рассмотрите возможность регулирования или устранения помех.Оба реализованы в lodash вспомогательной библиотеке.Вы можете использовать с React.

Регулирование обеспечивает максимальное количество вызовов функции со временем.Например, «выполнять эту функцию не чаще, чем раз в 100 миллисекунд».

Снятие запрета принудительно запрещает повторный вызов функции до тех пор, пока определенное время не пройдет без ее вызова.Например, «выполнять эту функцию, только если прошло 100 миллисекунд без вызова.»

const throttledHandlePingRange = _.throttle(handlePingRange 100);
const debouncedHandlePingRange = _.debounce(handlePingRange, 100);

Если использование lodash не является опцией, вы можете реализовать ее самостоятельно:

function debounce(fn, delay) {
    let timer = null;
    // closure function that has access to timer
    return function() {
      // get the scope and parameters of the funct via 'this' and 'arguments'
      let that = this;
      let args = arguments;
      // if event is called, clear the timer and start over
      clearTimeout(timer);
      timer = setTimeout(function() {
           fn.apply(that, args);
      }, delay);
  }
}

Answer 2

Я бы предпочел использовать onBlur, чем использовать onChange для обработки изменения диапазона, т. Е. Если минимальный значок на компоненте range по-прежнему включен, и пользователь пытается изменить минимальное значение, API будетне сработать;но если пользователь оставит минимальный значок, API будет срабатывать на Blur.