reactjs - Prevent User From Triggering Multiple Scrolling -

i have homepagecontainers holds data ajax requests , pass down homepage component. homepage component composed via higher order function infinitescroll supports scrolling.

the infinitescroll looks this:

componentdidmount() {     window.addeventlistener('scroll', this.onscroll.bind(this), false); }  componentwillunmount() {     window.removeeventlistener('scroll', this.onscroll.bind(this), false); }  onscroll() {     if ((window.innerheight + window.scrolly) >= (document.body.offsetheight - 200)) {         const { scrollfunc } = this.props;         scrollfunc();     } } 

i want code prevent scrolling once fired 1 , wait till data arrives request. like:

 ((window.innerheight + window.scrolly) >= (document.body.offsetheight - 200)) + //a new condition make sure scroll happens when data arrives or fails.  

note scrollfunc received homepagecontainers going update state according ajax request/responses.

i can store scrolling state in homepagecontainers @igorsvee mentioned want state go infinitescroll component responsible handling scrolling events.

how it?

assuming homepagecontainers component issues ajax requests, add new isfetching flag it's state , pass down along scrollfunc can conditionally invoke it:

if(this.props.isfetching){    scrollfunc(); } 

isfetching should true when request starts, false when ends success or error. or have conditional logic inside scrollfuncitself:

if(this.state.isfetching){ ... }