设置 onMouseDown 的最短执行时间

Question

我的应用程序中有以下弹出窗口 window，它使用 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);
}

设置 onMouseDown 的最短执行时间

Set a minimum execution time for onMouseDown

javascript

mouseevent

reactjs