为onMouseDown

Question

我的应用程序中有以下弹出窗口，它使用Bootstrap Tabs：

反馈标签有几个子标签，我添加了功能，以便您可以在溢出的子标签（左侧和右侧）之间滚动。以下是我实现该功能的方式（ReactJS）：

this.feedbackScrollInterval = -1;    

_feedbackScroll = (id) => {
  let obj = ReactDOM.findDOMNode(this.refs.feedbackNav);
  let scrollWidth = obj.firstChild.scrollWidth;
  let offsetWidth = obj.firstChild.offsetWidth;
  if(this.feedbackScrollInterval==-1) {
    this.feedbackScrollInterval = setInterval(function(){
      if(id==1) {
        obj.firstChild.scrollLeft -= 5;
      } else {
        obj.firstChild.scrollLeft += 5;
      }
    }, 15);
  }
}

_clearFeedbackScroll = () => {
  clearInterval(this.feedbackScrollInterval);
  this.feedbackScrollInterval = -1;
}

和按钮的标记：

<Button onMouseDown={this._feedbackScroll.bind(this, 1)} onMouseUp={this._clearFeedbackScroll}><Glyphicon glyph="chevron-left"></Glyphicon></Button>
<Button onMouseDown={this._feedbackScroll.bind(this, 2)} onMouseUp={this._clearFeedbackScroll}><Glyphicon glyph="chevron-right"></Glyphicon></Button>

以上按预期工作，但我想添加最小滚动时间。例如，如果我希望250ms的最小滚动时间和mouseUp之后的150ms事件触发器，我希望滚动条继续另一个100ms，直到最小值为止已经满足了。

如何实施？ （没有jQuery）

Answer 1

记录每次开始滚动操作的时间。

this.scrollStarted = Date.now();

然后滚动完成后，检查持续时间。

let scrollFinished = Date.now();
let duration = scrollFinished - this.scrollStarted;

如果持续时间大于您的阈值（250），则可以清除间隔。否则，请使用setTimeout来适当延迟取消。

if(duration > 250) {
  // go ahead and cancel the scroll
} else {
  setTimeout(this._clearFeedbackScroll, 250 - duration);
}