From 5cce044192684535c93a23952ec831529b71f350 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 16 Nov 2017 21:02:35 +0800
Subject: [PATCH] Debounce not working

---
 src/components/Charts/Bar/index.js      |  5 ++++-
 src/components/Charts/Pie/index.js      |  7 +++++--
 src/components/Charts/TagCloud/index.js |  3 +++
 src/layouts/BasicLayout.js              | 15 +++++++++------
 src/routes/Profile/AdvancedProfile.js   |  5 ++++-
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index f4d87b98..ef834d1c 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -1,6 +1,7 @@
 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;
     }
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 76395f45..74cd2296 100644
--- a/src/components/Charts/Pie/index.js
+++ b/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);
diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js
index 8ee3d3b0..78271484 100644
--- a/src/components/Charts/TagCloud/index.js
+++ b/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;
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 9072852b..2e2d9aec 100644
--- a/src/layouts/BasicLayout.js
+++ b/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(() => {
-      const event = document.createEvent('HTMLEvents');
-      event.initEvent('resize', true, false);
-      window.dispatchEvent(event);
-    }, 600);
+    this.triggerResizeEvent();
+  }
+  @Debounce(600)
+  triggerResizeEvent() { // eslint-disable-line
+    const event = document.createEvent('HTMLEvents');
+    event.initEvent('resize', true, false);
+    window.dispatchEvent(event);
   }
   handleNoticeClear = (type) => {
     message.success(`清空了${type}`);
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index 7848a7cc..671dac88 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -1,5 +1,6 @@
 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) {
-- 
GitLab