How to use the throttle-debounce.debounce function in throttle-debounce

To help you get started, we’ve selected a few throttle-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 cockpit-project / cockpit / pkg / networkmanager / firewall-client.js View on Github external
firewall.services = {};
        firewall.enabledServices = new Set();

        if (!firewall.enabled) {
            firewall.dispatchEvent('changed');
            return;
        }

        /* As certain dbus signal callbacks might change the firewall frequently
         * in a short period of time, prevent rapid succession of renders by
         * debouncing the ('changed') event */
        firewall.debouncedEvent = debounce(300, event => firewall.dispatchEvent(event));

        /* As a service might be removed from multiple zones at the same time,
         * prevent rapid succession of GetServices call */
        firewall.debouncedGetServices = debounce(300, getServices);

        firewall.debouncedGetZones = debounce(300, () => {
            getZones()
                    .then(() => getServices())
                    .catch(error => console.warn(error));
        });

        getZones()
                .then(() => getServices())
                .catch(error => console.warn(error));
    });
github albinotonnina / react-truncate-string / src / truncateString.js View on Github external
component: this.componentRef.offsetWidth,
      ellipsis: this.ellipsisRef.offsetWidth,
      text: this.textRef.offsetWidth
    }

    const {ellipsisString} = this.props

    return truncateString({
      measurements,
      text,
      ellipsisString,
      leftPercentage: this.props.truncateAt
    })
  }

  resetTruncate = debounce(50, () => {
    // this renders the original string so we can measure it
    this.setState({truncating: true}, () => {
      // now we render again with the truncated string
      const truncatedString = this.getTruncateString(this.props.text)
      this.setState({truncatedString, truncating: false})
    })
  })

  componentDidMount() {
    // calculate  truncatedString and set state to render again with the truncated string
    const truncatedString = this.getTruncateString(this.props.text)
    this.setState({truncatedString, truncating: false})

    window.addEventListener('resize', this.resetTruncate)
  }
github mhalle / oabrowser / src / ng-providers / crosshairProvider.js View on Github external
angular.module('atlasDemo').provider("crosshair", ["mainAppProvider", "volumesManagerProvider", function (mainAppProvider, volumesManagerProvider) {

    var singleton = {},
        volumesManager = volumesManagerProvider.$get(),
        mainApp = mainAppProvider.$get(),
        crosshairPosition = {},
        needUpdate =true,
        visible = false,
        mouseOverCrosshair = {},
        firebaseView,
        debouncedCommit = debounce(150, function () {
            if(firebaseView) {
                firebaseView.commit('crosshair');
            }
        });

    function computeCrosshairPosition () {
        var sagittal = volumesManager.compositingSlices.sagittal,
            coronal = volumesManager.compositingSlices.coronal,
            axial = volumesManager.compositingSlices.axial;
        if (axial && sagittal && coronal) {
            var dimensions = volumesManager.volumes[0].RASDimensions;
            crosshairPosition =  {
                coronal:[sagittal.index, axial.index],
                sagittal :[dimensions[2]-axial.index, dimensions[1]-coronal.index],
                axial :[sagittal.index, dimensions[1]-coronal.index]
            };
github linode / manager / src / features / Volumes / VolumeDrawer / LinodeSelect.tsx View on Github external
});
  };

  onInputChange = (inputValue: string, actionMeta: { action: string }) => {
    if (actionMeta.action !== 'input-change') {
      return;
    }

    if (this.mounted) {
      this.setState({ loading: true });
    }

    this.debouncedSearch(inputValue);
  };

  debouncedSearch = debounce(400, false, this.searchLinodes);

  render() {
    const {
      error,
      name,
      onBlur,
      shouldOnlyDisplayRegionsWithBlockStorage,
      onChange,
      ...rest
    } = this.props;
    const { loading, linodes, selectedLinodeId } = this.state;

    const options = shouldOnlyDisplayRegionsWithBlockStorage
      ? linodes.filter(linode => {
          const region = pathOr('', ['data', 'region'], linode);
          return doesRegionSupportBlockStorage(region);
github michaeldzjap / react-signature-pad-wrapper / src / SignaturePad.js View on Github external
constructor(props) {
        super(props);

        this.state = {canvasWidth: 0, canvasHeight: 0};

        this._callResizeHandler = debounce(
            this.props.debounceInterval,
            this.handleResize.bind(this)
        );
    }
github linode / manager / src / components / DebouncedSearchTextField / StoryComponents / SelectExample.tsx View on Github external
action('result')(filteredList);

      this.setState({
        list: filteredList,
        isSearching: false
      });
    }, 800);
  };

  handleChooseOption = (value: Item) => {
    if (value) {
      return this.setState({ selectedItem: value.label });
    }
  };

  debouncedSearch = debounce(400, false, this.handleSearch);

  render() {
    return (
      
        
        <p>
          <i>
            Note: The field is intentionally not pre-populated with data to</i></p>
github berty / berty / client / react-native / app / container / stream.js View on Github external
this.cursor = ''
    }
    this.smartForceUpdate()
  }

  smartForceUpdateMutex = new Mutex()

  smartForceUpdate = async () => {
    if (this.smartForceUpdateMutex.isLocked()) {
      return
    }
    const release = await this.smartForceUpdateMutex.acquire()
    this.forceUpdateDebounced(release)
  }

  forceUpdateDebounced = debounce(16, this.forceUpdate)

  get request() {
    const {
      fallback,
      children,
      context,
      request,
      response,
      filter,
      paginate,
      cursorExtractor,
      ...props
    } = this.props
    return { filter: this.filter, paginate: this.paginate, ...props }
  }
github nk-o / ghostkit / src / settings / pages / icons.js View on Github external
constructor( props ) {
        super( props );

        this.state = {
            settings: GHOSTKIT.settings || {},
        };

        this.getSetting = this.getSetting.bind( this );
        this.updateSetting = this.updateSetting.bind( this );
        this.updateIconsDebounce = debounce( 1000, this.updateIconsDebounce.bind( this ) );
    }
github findopendata / findopendata / frontend / src / components / KeywordSearchForm.js View on Github external
constructor(props) {
    super(props);
    let params = new URLSearchParams(this.props.location.search);
    const query = params.get("query");
    this.state = {
      value: query === null ? '' : query,
      suggestions: []
    };
    this.onSuggestionsFetchRequestedDebounced = debounce(500, this.onSuggestionsFetchRequested);
  }
  getSuggestionValue(suggestion) {
github maximebj / agb.plugin / src / blocks / unsplash / search.js View on Github external
const { createBlock } = wp.blocks
const { Fragment } = wp.element

class SearchUnsplash extends Component {

	state = {
    results: false,
    search: '',
    page: 1,
    image: null,
    uploading: false,
    choosenPic: null,
    isRandom: false,
	}

  onSearch = debounce( 300, search =&gt; {

    if( search.length &lt; 3 ) {
      return
    }
    
    this.setState( { page: 1 } )
    this.performSearch( search )
  } )

  nextPage = () =&gt; {
    this.setState( { page: ++this.state.page } )
    this.performSearch( this.state.search )

    document.getElementById(`block-${this.props.clientId}`).scrollIntoView()
  }

throttle-debounce

Throttle and debounce functions.

MIT
Latest version published 5 months ago

Package Health Score

77 / 100
Full package analysis