javascript - 设置 onMouseDown 的最短执行时间

Question

我的应用程序中有以下使用 Bootstrap 选项卡的弹出窗口:

反馈选项卡有几个子选项卡，我添加了功能，以便您可以在溢出的子选项卡(左侧和右侧)之间滚动。以下是我实现该功能的方法 (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);
}