How to use debounce-fn - 9 common examples

import './sticky-discussion-sidebar.css';
import select from 'select-dom';
import debounce from 'debounce-fn';
import onDomReady from 'dom-loaded';
import features from '../libs/features';
import onUpdatableContentUpdate from '../libs/on-updatable-content-update';

const sideBarSelector = '#partial-discussion-sidebar, .discussion-sidebar';

function updateStickiness(): void {
	const sidebar = select(sideBarSelector)!;
	const sidebarHeight = sidebar.offsetHeight + 60; // 60 matches sticky header's height
	sidebar.classList.toggle('rgh-sticky-sidebar', sidebarHeight < window.innerHeight);
}

const handler = debounce(updateStickiness, {wait: 100});

async function init(): Promise {
	await onDomReady;
	updateStickiness();
	window.addEventListener('resize', handler);
	onUpdatableContentUpdate(select(sideBarSelector)!, updateStickiness);
}

function deinit(): void {
	window.removeEventListener('resize', handler);
}

features.add({
	id: __featureName__,
	description: 'Makes the discussion sidebar sticky.',
	screenshot: 'https://user-images.githubusercontent.com/10238474/62276723-5a2eaa80-b44d-11e9-810b-ff598d1c5c6a.gif',

if (!this._didFlagChange(normalizedFlagName, normalizedFlagValue))
            return;

          const updatedFlags: Flags = {
            [normalizedFlagName]: normalizedFlagValue,
          };

          // NOTE: Adapter state needs to be updated outside of debounced-fn
          // so that no flag updates are lost.
          updateFlagsInAdapterState(updatedFlags);

          const updateFlags = () => {
            adapterEventHandlers.onFlagsStateChange(adapterState.flags);
          };

          debounce(updateFlags, {
            wait: flagsUpdateDelayMs,
            immediate: !flagsUpdateDelayMs,
          })();
        });
      }

fit() {
    if (this.props.tabId === this.props.currentTabId) {
      debouncer(this.props.session.fit, {wait: 150})()
    }
  }

function useDebFn(cb, opts) {
  return React.useCallback(debounceFn(cb, opts), [])
}

resetBlink() {
    debouncer(() => {
      if (this.currentProfile.get('cursorBlink')) {
        this.xterm.setOption('cursorBlink', false)
        this.xterm.setOption('cursorBlink', true)
      }
    }, {wait: 50})()
  }

import {Configure} from 'react-instantsearch/dom'
import InstantSearch from './InstantSearch'

type Props = {
  children?: React.Node,
  q?: string,
  initialSearchState: Object,
  initialResultsState: Object,
}
type State = {
  searchState: Object,
  production: boolean,
}

const debouncedRouterReplace = debounce(Router.replace, {wait: 700})
const debouncedTrackSearch = debounce(
  query => {
    window.gtag && window.gtag('event', 'search', {search_term: query})
  },
  {wait: 700}
)

class SearchBoss extends React.Component {
  state = {
    searchState: this.props.initialSearchState || {query: this.props.q || ''},
    production: true,
  }

  componentDidMount() {
    if (!isPresent(this.state.searchState.query) && Router.pathname === '/search') {
      const searchInput = window.document.querySelector('#global-product-search')
      if (searchInput) searchInput.focus()

import {urlForQuery} from '../utils/misc'
import {Configure} from 'react-instantsearch/dom'
import InstantSearch from './InstantSearch'

type Props = {
  children?: React.Node,
  q?: string,
  initialSearchState: Object,
  initialResultsState: Object,
}
type State = {
  searchState: Object,
  production: boolean,
}

const debouncedRouterReplace = debounce(Router.replace, {wait: 700})
const debouncedTrackSearch = debounce(
  query => {
    window.gtag && window.gtag('event', 'search', {search_term: query})
  },
  {wait: 700}
)

class SearchBoss extends React.Component {
  state = {
    searchState: this.props.initialSearchState || {query: this.props.q || ''},
    production: true,
  }

  componentDidMount() {
    if (!isPresent(this.state.searchState.query) && Router.pathname === '/search') {
      const searchInput = window.document.querySelector('#global-product-search')

constructor(props) {
    super(props)
    this.state = {
      allContentTypes: [],
      childReferences: [],
      entryMap: {},
      siblingReferences: []
    }

    this.onViewingEntryUpdated = debounce(this.onViewingEntryUpdated, {
      wait: 250
    })
  }

function useDebFn(cb, opts) {
  return React.useCallback(debounceFn(cb, opts), []);
}