requestAnimationFrame實現js防抖

timer.js

const hasNativePerformanceNow = typeof performance === 'object'
  && typeof performance.now === 'function';

const now = hasNativePerformanceNow
  ? () => performance.now()
  : () => Date.now();

export function cancelTimeout(timeoutID) {
  cancelAnimationFrame(timeoutID.id);
}

export function requestTimeout(callback, delay) {
  const start = now();

  function tick() {
    if (now() - start >= delay) {
      callback.call(null);
    } else {
      timeoutID.id = requestAnimationFrame(tick);
    }
  }

  const timeoutID = {
    id: requestAnimationFrame(tick),
  };

  return timeoutID;
}

index.jsx

const IS_SCROLLING_DEBOUNCE_INTERVAL = 2000;
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.onScrollVertical = this.onScrollVertical.bind(this);
    this.resetIsScrolling = this.resetIsScrolling.bind(this);
  }

  onScrollVertical(event) {
    if (this.resetIsScrollingTimeoutId) {
      cancelTimeout(this.resetIsScrollingTimeoutId);
    }

    this.resetIsScrollingTimeoutId = requestTimeout(
      this.resetIsScrolling,
      IS_SCROLLING_DEBOUNCE_INTERVAL,
    );
  }

  resetIsScrolling() {
    this.resetIsScrollingTimeoutId = null;
    console.log('handle debounce...');
  }

  render() {
    return (
      <div
        style={{ height: '80px', overflow: 'auto' }}
        onScroll={this.onScrollVertical}
      >
        {
          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
            <div style={{ height: '50px' }} key={item}>{item}</div>
          ))
        }
      </div>
    );
  }
}

export default Home;