Javascript 防止事件执行连续的反应时间

我有一个父组件，它的状态是一个对象，属性之一是一个名为onScrollbarSelection的函数，它生成一个axios post。所有这些都将传递给子组件

子组件使用Highcharts中的API，API的一个属性（AfterSetExtrems）使用父组件（props）中的onScrollbarSelection函数。问题是AfterSetExtreme会触发大量连续时间，这使得onScrollbarSelection函数也会执行大量连续时间，并导致大量axios帖子，从而导致浏览器崩溃

我尝试过在post调用上设置一个超时，但没有成功，它仍然多次调用axios post。如何防止onScrollbarSelection（或afterSetExtremes事件）连续执行很多次

const Parent = () => {
    const [state,setState] = useState({
        onScrollbarSelection: (e) => {
            var min = new Date(e.min);
            var max = new Date(e.max);
            var minDate = min.getFullYear() + '-' + (min.getMonth() + 1) + '-' + min.getDate();
            var maxDate = max.getFullYear() + '-' + (max.getMonth() + 1) + '-' + max.getDate();
            async function postData() {
                axios.post('url',{
                    start_date: minDate,
                    end_date: maxDate,
                });
            }
            setTimeout(postData(),3000);
        }
    });

    useEffect( () => {
        async function fetchData() {
            var res = await axios.get(url);
            setState({
                ...state,
                data: res.data,
            });
        }
        fetchData();
    },[]);



   return(
        <div>
             <Child config={state}/>
        </div>
   )

};

const Child = (props) => {
    const state = {
        xAxis:{
            events: {
                afterSetExtremes: (e) => { //this triggers a lot of consecutive times
                    props.config.onScrollbarSelection(e);
                }
            }

        }, 
    };

    return (
        <div>
            <HighchartsReact highcharts={Highcharts} constructorType={'stockChart'} options={state} />
        </div>
    );
}

const Parent=（）=>{
常量[状态，设置状态]=使用状态({
onScrollbarSelection：（e）=>{
var min=新日期（e.min）；
var max=新日期（e.max）；
var minDate=min.getFullYear（）+'-'+（min.getMonth（）+1）+'-'+min.getDate（）；
var maxDate=max.getFullYear（）+'-'+（max.getMonth（）+1）+'-'+max.getDate（）；
异步函数postData（）{
axios.post（'url'{
开始日期：minDate，
结束日期：maxDate，
});
}
setTimeout（postData（），3000）；
}
});
useffect（（）=>{
异步函数fetchData（）{
var res=等待axios.get（url）；
设定状态({
……国家，
数据：res.data，
});
}
fetchData（）；
},[]);
返回(
)
};
const Child=（道具）=>{
常量状态={
xAxis：{
活动：{
余弦：（e）=>{//这会触发很多连续的次数
props.config.onScrollbarSelection（e）；
}
}
}, 
};
返回(
);
}

您应该使用具有去盎司效果的功能

const Parent=（）=>{
const[data，setDate]=React.useState（）；
const[state，setState]=React.useState（[]）；
const afterSetExtremes=React.useCallback（{min，max}）=>{
设置状态（[最小值，最大值]）；
}, []);
/*为HighchartsReact创建选项*/
const option=React.useMoom（（）=>({
xAxis：{
活动：{
在极端事件之后，
},
},
})，[余震]；
/*从url获取数据并将其设置为数据状态*/
useffect（（）=>{
get（'url'）
。然后（（res）=>{
设置日期（res.data）；
})
},[]);
/*如果状态发生变化，则进行post，使用去盎司250ms*/
useffect（（）=>{
常量处理程序=设置超时（（）=>{
const[minDate，maxDate]=state.map（（值）=>{
const d=新日期（值）；
返回`${d.getFullYear（）}-${d.getMonth（）}-${d.getDate（）}`；
});
post（'url'，{开始日期：minDate，结束日期：maxDate}）
.然后（（res）=>{}）
.catch（（错误）=>{}）；
}, 250);
return（）=>{
/*如果状态在250ms内改变
*清除超时删除处理程序
*而且axios.post不调用。
*/
clearTimeout（处理器）；
};
}，[州]；
返回(
);
};您还可以尝试在onScrollbarSelection功能中实现设置超时和清除间隔。与下面的演示一样，想要的函数只触发一次：

演示：


编辑：

下面是使用React复制上述提案的演示：
感谢您向我展示了我应该使用的方法和debounce是什么。我真的很想要一个父和子组件，你能给我一个在父和子组件之间使用方法的小方向吗到子级。将
afterSetExtremes
作为道具传递给Child。在事件：{afterSetExtremes，}中，您没有传递任何参数，该如何工作？它不会执行。我做了事件：（e）=>{props.afteretextremes（e），}，它也没有做任何事情
（e）=>{props.afteretextremes（e）
-这里你创建了一个新函数，它获取
e
，并传递给
afteretextremes
。为了什么？在
afteretextremes
中，我使用了destruction.
const-etextremes=useCallback(({min，max}=>{/*使用min，max*/}）
相同的
const afteretextremes=useCallback（（e）=>{/*使用e.min，e.max*/}）
是的，我知道解构，这不是问题。问题是afteretextremes是一个API事件。（），它不再按照您的逻辑执行，您不是在父组件中重新说明了它吗？不起作用，我认为必须使用一些额外的React步骤done@Anamoreira不是真的，在上面的帖子中查看我的编辑。
  xAxis: {
    events: {
      afterSetExtremes() {
        myStopFunction()
        myFunction()
      }
    }
  }