Javascript 如何使用lodash使用一个油门调节多个按钮？

我希望避免并发并将操作限制为每秒1次

这是因为

onChange

事件也会触发持续时间为1s的幻灯片放映，并且触发两次会损坏UI

我最初是从4个去Bounces函数开始的，但最终得出以下结论：

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>
    );
  }
}

从“React”导入React；
从“样式化组件”导入{css}；
从“道具类型”导入道具类型；
从“lodash.omit”导入省略；
从“lodash.throttle”进口节流阀；
从“@bootstrap styled/v4/lib/Img”导入Img；
导出默认类服务和解决方案IMG扩展React.PureComponent{
静态类型={
src:PropTypes.string.isRequired，
alt:PropTypes.string.isRequired，
onDigitalSolution:需要PropTypes.func，
onServices:PropTypes.func.isRequired，
onHosting:PropTypes.func.isRequired，
onAddons:PropTypes.func.isRequired，
};
状态={
throttleFn:null，
}
组件willmount（）{
这是我的国家({
throttleFn：（e）=>throttle（this.props[e.target.value]，1000，{leading:false，training:true}）（，
});
}
render（）{
const{src，alt}=omit（this.props[
“onDigitalSolution”，
“在线服务”，
“onHosting”，
“Onadons”，
]);
返回(
);
}
}

预期 无延迟，每秒单击1次，无并发

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

有人知道为什么会失败吗

是一个接受函数并返回限制函数的函数。节流函数在x毫秒的窗口中只调用原始函数一次

多次调用throttle将返回多个throttle函数，您可以调用这些函数，并且每个函数都是时间窗口中唯一的调用

要解决此问题，请将回调上调用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>
    );
  }
}

导出默认类服务和解决方案IMG扩展React.PureComponent{
静态类型={
src:PropTypes.string.isRequired，
alt:PropTypes.string.isRequired，
onDigitalSolution:需要PropTypes.func，
onServices:PropTypes.func.isRequired，
onHosting:PropTypes.func.isRequired，
onAddons:PropTypes.func.isRequired，
};
//创建节流函数
throttleFn=throttle（（e）=>this.props[e.target.value]，1000，{leading:false，training:true}）
render（）{
//不需要遗漏任何东西-你知道你想要什么
const{src，alt}=this.props；
返回(
);
}
}