How to use debounce - 10 common examples

To help you get started, we’ve selected a few debounce examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github post-tracker / site / app / actions.js View on Github external
} catch ( postsFail ) {
                dispatch( receivePosts( [] ) );
                console.error( postsFail );
            }
        } );
    } );

    request.on( 'error', ( requestError ) => {
        // eslint-disable-next-line no-console
        console.error( `problem with request: ${ requestError.message }` );
    } );

    request.end();
};

const debouncedFetchPosts = debounce( getPosts, FETCH_DEBOUNCE_INTERVAL );

const fetchPosts = function fetchPosts ( state ) {
    const {
        search,
        groups,
        services,
     } = state;

    return ( dispatch ) => {
        debouncedFetchPosts( search, groups, services, dispatch );
    };
};

const fetchPostsImmediate = function fetchPostsImmediate ( state ) {
    const {
        search,
github zubairghori / Ultimate_todo_list / react-todo-rest-api / node_modules / @material-ui / core / es / Slide / Slide.js View on Github external
constructor(...args) {
    super(...args);
    this.mounted = false;
    this.handleResize = debounce(() => {
      // Skip configuration where the position is screen size invariant.
      if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
        return;
      }

      if (this.transitionRef) {
        setTranslateValue(this.props, this.transitionRef);
      }
    }, 166);

    this.handleEnter = node => {
      setTranslateValue(this.props, node);
      reflow(node);

      if (this.props.onEnter) {
        this.props.onEnter(node);
github buttercup / buttercup-browser-extension / source / shared / library / mouseEvents.js View on Github external
export function trackScrolling() {
    const debouncedUserActivity = debounce(() => trackUserActivity(), 250, /* trailing: */ false);
    const handleScrollUpdate = () => {
        debouncedUserActivity();
    };
    window.addEventListener("scroll", handleScrollUpdate);
}
github alexieyizhe / intern.plus / src / components / SearchHandler / index.tsx View on Github external
const defaultQueryVal = useQueryParam(SEARCH_VALUE_QUERY_PARAM_KEY) as string; // search query to start with

  /**
   * Track the current value in the search box.
   */
  const [searchVal, setSearchVal] = useState(defaultQueryVal || "");
  const searchOnChange = useCallback(
    // TODO: debounce this
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setSearchVal(e.target.value);
    },
    []
  );

  // track debounce with ref (see https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
  const debouncedLastSearchUpdater = useRef(debounce(onNewSearchVal, 1500));
  useEffect(() => {
    if (searchVal) {
      debouncedLastSearchUpdater.current(searchVal);
    }
  }, [searchVal]);

  return (
    <StickySearch
      className="search-input"
      value={searchVal}
      onChange={searchOnChange}
      onSearchStart={() => onNewSearchVal(searchVal)}
      {...rest}
    />
  );
};
github vsls-contrib / gistpad / src / commands / playground.ts View on Github external
webViewPanel.webview,
    output,
    gist,
    scripts,
    styles
  );

  if ((await config.get("playground.showConsole")) || manifest.showConsole) {
    output.show(false);
  }

  const autoRun = await config.get("playground.autoRun");
  const runOnEdit = autoRun === "onEdit";

  const documentChangeDisposable = vscode.workspace.onDidChangeTextDocument(
    debounce(async ({ document }) => {
      if (isPlaygroundDocument(gist, document, MARKUP_EXTENSIONS)) {
        const content = getMarkupContent(document);

        if (content !== null) {
          htmlView.updateHTML(content, runOnEdit);
        }
      } else if (isPlaygroundDocument(gist, document, SCRIPT_EXTENSIONS)) {
        // If the user renamed the script file (e.g. from *.js to *.jsx)
        // than we need to update the manifest in case new scripts
        // need to be injected into the webview (e.g. "react").
        if (
          jsEditor &&
          jsEditor.document.uri.toString() !== document.uri.toString()
        ) {
          // TODO: Clean up this logic
          const oldFile =
github vtex-apps / store-components / react / components / ProductDescription / components / GradientCollapse.js View on Github external
this.state = { isCollapseVisible: true, collapsed: true, maxHeight: 'auto' }

    this.wrapper = React.createRef()
  }

  calcMaxHeight = () => {
    const { collapseHeight } = this.props
    const wrapper = this.wrapper.current

    if (wrapper.scrollHeight > collapseHeight) {
      const maxHeight = wrapper.scrollHeight + 60
      this.setState({ isCollapseVisible: true, maxHeight })
    } else this.setState({ isCollapseVisible: false, maxHeight: 'auto' })
  }

  debouncedCalcMaxHeight = debounce(this.calcMaxHeight, 500)

  componentDidMount() {
    window.addEventListener('resize', this.debouncedCalcMaxHeight)
    this.calcMaxHeight()
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.debouncedCalcMaxHeight)
  }

  render() {
    const { children, collapseHeight } = this.props
    const { collapsed, isCollapseVisible, maxHeight } = this.state
    const height = isCollapseVisible && collapsed ? collapseHeight : maxHeight
    const transitionTime = 600
    const fadeOutTime = 400
github awethemes / awebooking / assets / babel / admin / admin.js View on Github external
awebooking.dialog = function (selector) {
  const $dialog = $(selector).dialog({
    modal: true,
    width: 'auto',
    height: 'auto',
    autoOpen: false,
    draggable: false,
    resizable: false,
    closeOnEscape: true,
    dialogClass: 'wp-dialog awebooking-dialog',
    position: { my: 'center', at: 'center center-15%', of: window },
  })

  $(window).on('resize', debounce(() => {
    $dialog.dialog('option', 'position', { my: 'center', at: 'center center-15%', of: window })
  }, 150))

  return $dialog
}
github devfake / flox / client / app / components / Content / Settings / Reminders.vue View on Github external
created() {
      this.fetchUserData();
      this.clearSuccessMessage = debounce(this.clearSuccessMessage, debounceMilliseconds);
    },
github kvartborg / hueify / src / views / Lights.jsx View on Github external
<span>
            <Toggle
              style={{ marginRight: '10px' }}
              checked={light.state.on}
              onClick={this.toggleLight.bind(this, light)}
            />
            <span onClick={this.toggleColorWheel.bind(this, light)}>
              {light.name}
            </span>
          </span>
          <Slider
            min='0'
            max='255'
            disabled={!light.state.on}
            defaultValue={light.state.bri}
            onInput={debounce(this.setLightBrightness.bind(this, light), 200)}
          />
        </span>
      </li>
    )
  }
}
github odopod / code-library / packages / odo-base-component / src / base-component.js View on Github external
_registerMediaQueryListeners() {
    this._onMediaChange = debounce(this.onMediaQueryChange.bind(this), 50);
    Object.keys(BaseComponent.queries).forEach((k) => {
      BaseComponent.queries[k].addListener(this._onMediaChange);
    });
  }

debounce

Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked

MIT
Latest version published 2 years ago

Package Health Score

74 / 100
Full package analysis

Popular debounce functions

Popular JavaScript code snippets

Find secure code to use in your application or website