如何使用 lodash 用 1 个油门来控制多个按钮?
How to use lodash to throttle multiple buttons with 1 throttle?
我想避免并发并将操作限制为每秒 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 个并发操作。
有人知道为什么会失败吗?
Throttle是一个接受函数的函数,returns是一个节流函数。节流函数仅在 x 毫秒的 window 内调用一次原始函数。
多次调用 throttle,returns 多个你调用的 throttled 函数,每个函数都是 window 时间内的唯一调用。
要解决此问题,请将在回调中调用 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>
);
}
}
我想避免并发并将操作限制为每秒 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 个并发操作。
有人知道为什么会失败吗?
Throttle是一个接受函数的函数,returns是一个节流函数。节流函数仅在 x 毫秒的 window 内调用一次原始函数。
多次调用 throttle,returns 多个你调用的 throttled 函数,每个函数都是 window 时间内的唯一调用。
要解决此问题,请将在回调中调用 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>
);
}
}