How to use the lodash-decorators.Debounce function in lodash-decorators

export class AgGrid extends React.Component {
    gridApi: GridApi;
    // 表格容器
    refTableBody = React.createRef();
    // 事件对象
    resizeEvent: Subscription;
    minHeight = 400;
    state = {
        sortable: true,
        height: this.minHeight
    }
    /**
     * 修改 高度
     * @param refFullscreen
     */
    @Debounce(200)
    onUpdateHeight(refFullscreen = false) {
        try {
            // props 中传递了 height
            if (this.props.style && this.props.style.height) {
                return
            }
            const refTable = this.refTableBody.current;//ReactDOM.findDOMNode(this.ref.current) as HTMLDivElement;
            // 60 是头部 标题栏 高度
            let height = window.innerHeight - refTable.offsetTop - 60 - 100;
            if (!globalConfig.tabsPage) {
                height += 90;
            }
            height = height < this.minHeight ? this.minHeight : height;
            if (this.state.height !== height) {
                this.gridApi.sizeColumnsToFit();
                this.setState({ height });

tableDom: HTMLDivElement;
    // clientWidth = 0;
    /**
     * 初始化列参数配置
     */
    @action.bound
    initColumns() {
        this.columns = this.onGetColumns(TableUtils.onSetColumnsWidth(this.tableDom, this.OriginalColumns));
    }
    /**
     * 分页、排序、筛选变化时触发
     * @param page 
     * @param filters 
     * @param sorter 
     */
    @Debounce(300)
    onChange(page, filters, sorter) {
        if (this.isResize) {
            return console.log("拖拽中")
        }
        let sort: any = "";
        if (sorter.columnKey) {
            if (sorter.order == 'descend') {
                sort = { Direction: "Desc", Property: sorter.columnKey }
                // sort = `${sorter.columnKey} desc`
            } else {
                sort = { Direction: "Asc", Property: sorter.columnKey }
                // sort = `${sorter.columnKey} asc`
            }
        }
        this.Store.onSearch({
            SortInfo: sort,

categories: null,
      },
      () => {
        if (query.length >= MIN_SEARCH_LENGTH) {
          this.query$.next(query.trim());
        } else if (!shouldKeepWarningVisible) {
          this.considerMinLengthWarning();
        }
      },
    );
  };

  // Rather than add a jarring warning message as someone is typing a query —
  // for which a warning might not even be necessary — we wait until typing has finished
  // to determine whether a warning will be useful.
  @Debounce(300)
  private considerMinLengthWarning() {
    const { query } = this.state;
    this.setState({ showMinLengthWarning: !!query && query.length < MIN_SEARCH_LENGTH });
  }

  private showDropdown = () => {
    this.setState({ showDropdown: true });
  };

  private hideDropdown = () => {
    this.setState({ showDropdown: false });
  };

  private clearFilters = (result: ISearchResult) => {
    ClusterState.filterService.overrideFiltersForUrl(result);
  };

const legendData = items.map(item => {
      /* eslint no-underscore-dangle:0 */
      const origin = item[0]._origin;
      origin.color = item[0].color;
      origin.checked = true;
      return origin;
    });

    this.setState({
      legendData,
    });
  };

  // For window resize auto responsive legend.
  @Bind()
  @Debounce(300)
  resize() {
    const {hasLegend} = this.props;
    if (!hasLegend || !this.root) {
      window.removeEventListener('resize', this.resize);
      return;
    }
    if (this.root.parentElement && this.root.parentElement.clientWidth <= 380) {
      if (!this.state.legendBlock) {
        this.setState({
          legendBlock: true,
        });
      }
    } else if (this.state.legendBlock) {
      this.setState({
        legendBlock: false,
      });

public componentDidMount() {
    window.addEventListener('resize', this.windowResize);
    this.validationSubscription = PipelineConfigValidator.subscribe(validations => {
      this.pipelineValidations = validations;
      this.updateGraph(this.props);
    });
    this.updateGraph(this.props);
  }

  private refCallback = (element: HTMLDivElement): void => {
    if (element) {
      this.element = $(element);
    }
  };

  @Debounce(300)
  private validatePipeline(pipeline: IPipeline): void {
    PipelineConfigValidator.validatePipeline(pipeline).catch(() => {});
  }

  public componentWillReceiveProps(nextProps: IPipelineGraphProps) {
    let updateGraph = false;
    let stateOnly = true;

    if (
      (nextProps.execution && this.graphStatusHash !== nextProps.execution.graphStatusHash) ||
      nextProps.execution !== this.props.execution
    ) {
      this.graphStatusHash = nextProps.execution.graphStatusHash;
      updateGraph = true;
      stateOnly = false;
    }

const { application } = this.props;
    if (application.pipelineConfigs.loadFailure) {
      return;
    }
    this.updateExecutionGroups();
    application.executions.reloadingForFilters = false;
  }

  public componentWillUnmount(): void {
    this.groupsUpdatedSubscription.unsubscribe();
    this.locationChangeUnsubscribe();
    this.executionsRefreshUnsubscribe();
    this.pipelineConfigsRefreshUnsubscribe();
  }

  @Debounce(300)
  private updateFilterSearch(searchString: string): void {
    const sortFilter = ExecutionState.filterModel.asFilterModel.sortFilter;
    sortFilter.filter = searchString;
    ReactGA.event({ category: 'Pipelines', action: 'Filter: search', label: sortFilter.filter });
    this.updateExecutionGroups();
  }

  private searchFieldUpdated = (event: React.FormEvent): void => {
    this.updateFilterSearch(event.currentTarget.value);
  };

  private updatePipelines(pipelines: IPipeline[]): void {
    $q.all(pipelines.map(pipeline => PipelineConfigService.savePipeline(pipeline)));
  }

  private handleSortEnd = (sortEnd: SortEnd): void => {

private initialize(): void {
    const { application } = this.props;
    if (application.pipelineConfigs.loadFailure) {
      return;
    }
    this.updateExecutionGroups();
  }

  public componentWillUnmount(): void {
    this.groupsUpdatedSubscription.unsubscribe();
    this.locationChangeUnsubscribe();
    this.executionsRefreshUnsubscribe();
    this.pipelineConfigsRefreshUnsubscribe();
  }

  @Debounce(300)
  private updateFilterSearch(searchString: string): void {
    const sortFilter = ExecutionState.filterModel.asFilterModel.sortFilter;
    sortFilter.filter = searchString;
    ReactGA.event({ category: 'Pipelines', action: 'Filter: search', label: sortFilter.filter });
    this.updateExecutionGroups();
  }

  private searchFieldUpdated = (event: React.FormEvent): void => {
    this.updateFilterSearch(event.currentTarget.value);
  };

  private updatePipelines(idsToUpdatedIndices: { [key: string]: number }): IPromise {
    return PipelineConfigService.reorderPipelines(this.props.application.name, idsToUpdatedIndices, false);
  }

  private handleSortEnd = (sortEnd: SortEnd): void => {

if (lodash.isArray(this.props.value) && this.props.value.length > 0) {
                this.dataSource = this.props.value.map(x => {
                    return {
                        ...this.props.setValues,
                        ...x,
                        __key: lodash.get(x, this.props.rowKey)
                    }
                })
            }
        });
    }
    @Debounce(100)
    handleChange() {
        this.props.onChange(toJS(this.dataSource));
    }
    @Debounce(100)
    handleAdd() {
        const dataSource = [...this.dataSource];
        dataSource.push({
            ...this.props.setValues,
            __key: Help.GUID(),
            ...lodash.mapValues(this.props.models, (value) => {
                return undefined
            })
        });
        this.onUpdateDataSource(dataSource)
    }
    handleSave() {
        this.onUpdateDataSource(toJS(this.dataSource))
    }
    handleRemove(record) {
        const dataSource = [...this.dataSource];

if (!lodash.isEqual(this.props.disabled, nextProps.disabled)) {
            return true;
        }
        if (nextState.load) {
            return !lodash.eq(this.state, nextState);
        }
        return false
    }
    key = Date.now()
    state = {
        //显示
        visible: false,
        //初始化装载  按钮 第一次 点击 显示 为 已装载 优化性能
        load: false,
    }
    @Debounce(100)
    onVisible(visible = !this.state.visible) {
        this.setState(state => {
            state.visible = visible;
            if (!state.load) {
                state.load = true;
                this.Optimization = Form.create()(Optimization);
            }
            return { ...state }
        })
    }
    Optimization;//= Form.create()(Optimization);
    render() {
        const option = {
            title: lodash.get(this.props, 'title', '未设置标题'),
            disabled: lodash.get(this.props, "disabled", false),
            showSubmit: lodash.get(this.props, 'showSubmit', true),

enabled: NetflixSettings.feature.fastProperty,
      filters: [],
      allProperties: [],
      filteredProperties: [],
      groupedProperties: null,
      groupedBy: 'none',
      searchTerm: ReactInjector.$stateParams.q || '',
    };
    this.filtersUpdatedStream.subscribe((newTags) => this.filtersChanged(newTags));
    if (ReactInjector.$stateParams.q) {
      this.performSearch(ReactInjector.$stateParams.q);
    }
    this.stateChangeListener = ReactInjector.stateEvents.stateChangeSuccess.subscribe(() => this.filtersChanged(this.state.filters));
  }

  @Debounce(300)
  private performSearch(searchTerm: string): void {
    ReactInjector.$state.go('.', {q: searchTerm});
    this.setState({loading: true});
    NetflixReactInjector.fastPropertyReader.search(searchTerm).then((data) => {
      return data.map((fp) => {
        fp.appId = fp.appId || 'All (Global)';
        return fp;
      });
    }).then((searchResults) => {
      this.setState({loading: false});
      this.allPropertiesChanged(searchResults);
    }).catch(() => {
      this.setState({filteredProperties: undefined, groupedProperties: undefined, loading: false});
    });
  }