Debounce not working

src/components/Charts/Bar/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
 import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import equal from '../equal';
 import styles from '../index.less';
 
@@ -26,10 +27,12 @@ class Bar extends PureComponent {
     if (this.chart) {
       this.chart.destroy();
     }
+    this.resize.cancel();
   }
 
+  @Bind()
   @Debounce(200)
-  resize = () => {
+  resize() {
     if (!this.node) {
       return;
     }

src/components/Charts/Pie/index.js

@@ -4,6 +4,7 @@ import { Divider } from 'antd';
 import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
 import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import equal from '../equal';
 import styles from './index.less';
 
@@ -31,10 +32,12 @@ class Pie extends Component {
     if (this.chart) {
       this.chart.destroy();
     }
+    this.resize.cancel();
   }
 
-  @Debounce(200)
-  resize = () => {
+  @Bind()
+  @Debounce(300)
+  resize() {
     const { hasLegend } = this.props;
     if (!hasLegend || !this.root) {
       window.removeEventListener('resize', this.resize);

src/components/Charts/TagCloud/index.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import G2 from 'g2';
 import Cloud from 'g-cloud';
 import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './index.less';
 
 /* eslint no-underscore-dangle: 0 */
@@ -26,6 +27,7 @@ class TagCloud extends PureComponent {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.resize);
+    this.resize.cancel();
   }
 
   resize = () => {
@@ -73,6 +75,7 @@ class TagCloud extends PureComponent {
     this.node = node;
   }
 
+  @Bind()
   @Debounce(500)
   renderChart = (newData) => {
     const data = newData || this.props.data;

src/layouts/BasicLayout.js

@@ -8,6 +8,7 @@ import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
+import Debounce from 'lodash-decorators/debounce';
 import HeaderSearch from '../components/HeaderSearch';
 import NoticeIcon from '../components/NoticeIcon';
 import GlobalFooter from '../components/GlobalFooter';
@@ -69,7 +70,7 @@ class BasicLayout extends React.PureComponent {
     });
   }
   componentWillUnmount() {
-    clearTimeout(this.resizeTimeout);
+    this.triggerResizeEvent.cancel();
   }
   onCollapse = (collapsed) => {
     this.props.dispatch({
@@ -216,11 +217,13 @@ class BasicLayout extends React.PureComponent {
       type: 'global/changeLayoutCollapsed',
       payload: !collapsed,
     });
-    this.resizeTimeout = setTimeout(() => {
+    this.triggerResizeEvent();
+  }
+  @Debounce(600)
+  triggerResizeEvent() { // eslint-disable-line
     const event = document.createEvent('HTMLEvents');
     event.initEvent('resize', true, false);
     window.dispatchEvent(event);
-    }, 600);
   }
   handleNoticeClear = (type) => {
     message.success(`清空了${type}`);

src/routes/Profile/AdvancedProfile.js

 import React, { Component } from 'react';
 import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import { connect } from 'dva';
 import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd';
 import classNames from 'classnames';
@@ -160,14 +161,16 @@ export default class AdvancedProfile extends Component {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.setStepDirection);
+    this.setStepDirection.cancel();
   }
 
   onOperationTabChange = (key) => {
     this.setState({ operationkey: key });
   }
 
+  @Bind()
   @Debounce(200)
-  setStepDirection = () => {
+  setStepDirection() {
     const { stepDirection } = this.state;
     const w = getWindowWidth();
     if (stepDirection !== 'vertical' && w <= 576) {