无限滚动用光标快速旋转，但空格键或滚轮很好

Question

我试图通过实现自定义无限滚动来学习React。

使用空格键或鼠标滚轮滚动时，代码按预期工作。

但是如果我用鼠标光标向下拖动滚动条（在我的桌面计算机上），滚动发生得太快（因为显然使用鼠标光标向下拖动滚动条 - ＆gt;导致滚动条粘到底部 - ＆gt;导致代码触发太多次）。

如何减慢鼠标光标盒中的无限滚动？

＆＃13;

＆＃13;

var arr = [];

for (var i = 0; i<1000; i++) {
  
  arr.push(i);

}


class Element extends React.Component{

  render() {
      
      const styleObj = {height: 100, backgroundColor:"hotpink"};
    
      return (<div style={styleObj}> {this.props.data} </div>);

  }
}


class App extends React.Component{

  constructor(props) {
    super(props);
    
    this.state = {
      visibleStart: 0,
      visibleEnd: 20,
	  diff: 20
    };
  }

  render() {

    var arr2 = arr.slice(this.state.visibleStart, this.state.visibleEnd);
    var renderedOutput = arr2.map((item,index) => <Element data={item} key={index}/>)

    return (
      <div>
        {renderedOutput}
      </div>
    );
  }
  
 componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this))
  }

 componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll.bind(this))
  }
  


 handleScroll(event) {
	if($(window).scrollTop() + $(window).height() === $(document).height()) {
	console.log(this.state.visibleStart + " " + this.state.visibleEnd);
    
	var visibleStart = this.state.visibleStart+ this.state.diff;
	var visibleEnd = this.state.visibleEnd + this.state.diff;
	
	this.setState({
		visibleStart: visibleStart,
        visibleEnd: visibleEnd
      });
	window.scrollTo(0, 300);
	
	console.log(this.state.visibleStart + " " + this.state.visibleEnd);
	}
	console.log($(window).scrollTop());

 }
}

ReactDOM.render(<App />, document.getElementById("app"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以设置一个标记，例如 allowScroll ：

constructor(props) {
    super(props);

    this.state = {
        visibleStart: 0,
        visibleEnd: 20,
        diff: 20
    };

    this.allowScroll = true;
}

然后在你的滚动处理程序中使用超时来防止不必要的执行：

handleScroll(event) {
    if (!this.allowScroll) {
        return;
    }

    this.allowScroll = false;

    setTimeout(function() {
        this.allowScroll = true;
    }, 1000);

    // ...

 }