Установка минимального времени выполнения для 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); 
}