如何使用 lodash 用 1 个油门控制多个按钮？

Question

我想避免并发并将操作限制为每秒 1 次。

这是因为onChange 事件还会触发持续时间为 1 秒的幻灯片放映，并且触发两次会破坏 UI。

我最初是从 4 个去抖动功能开始的，但最终得到了这个：

import React from 'react';
import { css } from 'styled-components';
import PropTypes from 'prop-types';
import omit from 'lodash.omit';
import throttle from 'lodash.throttle';
import Img from '@bootstrap-styled/v4/lib/Img';

export default class ServicesAndSolutionImg extends React.PureComponent {
  static propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
    onDigitalSolution: PropTypes.func.isRequired,
    onServices: PropTypes.func.isRequired,
    onHosting: PropTypes.func.isRequired,
    onAddons: PropTypes.func.isRequired,
  };

  state = {
    throttleFn: null,
  }

  componentWillMount() {
    this.setState({
      throttleFn: (e) => throttle(this.props[e.target.value], 1000, { leading: false, trailing: true })(),
    });
  }

  render() {
    const { src, alt } = omit(this.props, [
      'onDigitalSolution',
      'onServices',
      'onHosting',
      'onAddons',
    ]);

    return (
      <div css={css`position: relative`}>
        <Img fluid src={src} alt={alt} className="w-100 pt-3 pl-5 pr-5" />
        <div css={css`
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
        `}>
          <div css={css`
            position: relative;
            width: inherit;
            height: inherit;
            button {
              cursor: pointer;
              position: absolute;
              top: 23%;
              height: 51%;
              opacity: 0;
            }
            button:nth-child(1) {
              left: 15%;
              width: 16%;
            }
            button:nth-child(2) {
              left: 32%;
              width: 16%;
            }
            button:nth-child(3) {
              left: 48%;
              width: 16%;
            }
            button:nth-child(4) {
              left: 65%;
              width: 16%;
            }
          `}>
            <button onClick={this.state.throttleFn} value="onDigitalSolution" />
            <button onClick={this.state.throttleFn} value="onServices" />
            <button onClick={this.state.throttleFn} value="onHosting" />
            <button onClick={this.state.throttleFn} value="onAddons" />
          </div>
        </div>
      </div>
    );
  }
}

预期

无延迟，每秒1次点击，无并发

结果

1 秒延迟，最多 4 个并发操作。

有人知道为什么会失败吗？

Answer 1

Throttle 是一个接受一个函数并返回一个节流函数的函数。节流函数仅在 x 毫秒的窗口内调用原始函数一次。

多次调用throttle，返回多个被限制的函数，你调用它们，每个都是时间窗口中唯一的调用。

要解决此问题，请将回调中调用节流的结果分配给组件上的属性，并在您注册点击事件时调用该函数。

export default class ServicesAndSolutionImg extends React.PureComponent {
  static propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
    onDigitalSolution: PropTypes.func.isRequired,
    onServices: PropTypes.func.isRequired,
    onHosting: PropTypes.func.isRequired,
    onAddons: PropTypes.func.isRequired,
  };

  // create the throttled function
  throttleFn = throttle((e) => this.props[e.target.value], 1000, { leading: false, trailing: true })

  render() {
     // no need to omit anything - you know what you want
    const { src, alt } = this.props;

    return (
      <div css={css`position: relative`}>
        <Img fluid src={src} alt={alt} className="w-100 pt-3 pl-5 pr-5" />
        <div css={css`
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
        `}>
          <div css={css`
            position: relative;
            width: inherit;
            height: inherit;
            button {
              cursor: pointer;
              position: absolute;
              top: 23%;
              height: 51%;
              opacity: 0;
            }
            button:nth-child(1) {
              left: 15%;
              width: 16%;
            }
            button:nth-child(2) {
              left: 32%;
              width: 16%;
            }
            button:nth-child(3) {
              left: 48%;
              width: 16%;
            }
            button:nth-child(4) {
              left: 65%;
              width: 16%;
            }
          `}>
            <button onClick={this.throttleFn} value="onDigitalSolution" />
            <button onClick={this.throttleFn} value="onServices" />
            <button onClick={this.throttleFn} value="onHosting" />
            <button onClick={this.throttleFn} value="onAddons" />
          </div>
        </div>
      </div>
    );
  }
}