解决请求时间过长导致展示时间不足的问题

kanban-client/README.md

@@ -80,6 +80,8 @@ columns[i].rowStyle---------------指定列数据列样式
 * 折线图区域填充实现
 ##### 20191011
 * 多看板切换因为key值使用索引导致table未能正确刷新的bug
+##### 20191021
+* 因为接口请求时间占用太多导致某些画面实际展示时间不足，由原设置单次setInterval循环请求数据展示改为每次请求结束后setTimeout再次请求数据以使接口请求时间排除在设定的刷新间隔时间之外，这样如果一个看板接口请求时间过长，则只会延长上一个看板的展示时间而非压缩该看板的展示时间。
 
 #### 已知小bug
 * 多模板看板第一次进入需要多等待一个刷新时才会切换到下一个模板。

kanban-client/app/component/factory.dev.js

@@ -7,13 +7,13 @@ import URL from '../constants/url.dev.json';
 import 'whatwg-fetch';
 import { getThemeConfig, applyTheme } from './theme/applyTheme.js';
 
-import tempdata from '../data/bug/bug.json';
+import tempdata from '../data/testline.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local';
+        this.dev = 'local ';
         
         this.index = 0;
         this.state = {
@@ -44,13 +44,13 @@ class Factory extends React.Component {
             if(!json.instance) {
                 throw {message: json.message};
             }
-            let instance = json.instance;
-            if (!me.state.instance) {
-                me.setState({
-                    instance: instance
-                }, me.setRefresh);
+            if (!me.instance) {
+                me.instance = json.instance;
             }
             return json;
+        }).then((json) => {
+            me.setRefresh();
+            return json;
         }).then(function (json) {
             let modelconfig = json.data[0];
             let theme = json.theme;
@@ -93,7 +93,7 @@ class Factory extends React.Component {
     }
 
     setRefresh() {
-        let { instance } = this.state;
+        let instance = this.instance;
         if (!instance) { return; }
         let codes = instance.enabledKanbanCodes;
         let display = instance.display;
@@ -111,7 +111,7 @@ class Factory extends React.Component {
         };
         if (refresh.current) {
             if (refresh.current.enable) {
-                this.refreshThis = setInterval(function () {
+                this.refreshThis = window.setTimeout(() => {
                     if (this.index == codes.length - 1) {
                         this.index = 0;
                     } else {
@@ -119,7 +119,7 @@ class Factory extends React.Component {
                     }
                     let reg = /(.*){code}(.*){index}(.*){kanbanCode}(.*)/g;
                     this.getModelConfig(URL.completelyPath.replace(reg, '$1' + this.props.code + '$2' + this.props.index + '$3' + codes[this.index]));
-                }.bind(this), refresh.current.interval * 1000 || 10000)
+                }, refresh.current.interval * 1000 || 10000);
             }
         }
     }
@@ -166,7 +166,8 @@ class Factory extends React.Component {
         window.removeEventListener('resize', this.onWindowResize);
         if (this.refreshThis) {
             if (this.refreshThis.interval > 0) {
-                window.clearInterval(this.refreshThis);
+                // window.clearInterval(this.refreshThis);
+                window.clearTimeout(this.refreshThis);
             }
         }
         if (this.refreshNext) {

kanban-client/app/component/factory.js

@@ -40,13 +40,13 @@ class Factory extends React.Component {
             if(!json.instance) {
                 throw {message: json.message};
             }
-            let instance = json.instance;
-            if (!me.state.instance) {
-                me.setState({
-                    instance: instance
-                }, me.setRefresh);
+            if (!me.instance) {
+                me.instance = json.instance;
             }
             return json;
+        }).then((json) => {
+            me.setRefresh();
+            return json;
         }).then(function (json) {
             let modelconfig = json.data[0];
             let theme = json.theme;
@@ -89,7 +89,7 @@ class Factory extends React.Component {
     }
 
     setRefresh() {
-        let { instance } = this.state;
+        let instance = this.instance;
         if (!instance) { return; }
         let codes = instance.enabledKanbanCodes;
         let display = instance.display;
@@ -107,7 +107,7 @@ class Factory extends React.Component {
         };
         if (refresh.current) {
             if (refresh.current.enable) {
-                this.refreshThis = setInterval(function () {
+                this.refreshThis = window.setTimeout(() => {
                     if (this.index == codes.length - 1) {
                         this.index = 0;
                     } else {
@@ -115,7 +115,7 @@ class Factory extends React.Component {
                     }
                     let reg = /(.*){code}(.*){index}(.*){kanbanCode}(.*)/g;
                     this.getModelConfig(URL.completelyPath.replace(reg, '$1' + this.props.code + '$2' + this.props.index + '$3' + codes[this.index]));
-                }.bind(this), refresh.current.interval * 1000 || 10000)
+                }, refresh.current.interval * 1000 || 10000);
             }
         }
     }
@@ -144,7 +144,7 @@ class Factory extends React.Component {
         window.removeEventListener('resize', this.onWindowResize);
         if (this.refreshThis) {
             if (this.refreshThis.interval > 0) {
-                window.clearInterval(this.refreshThis);
+                window.clearTimeout(this.refreshThis);
             }
         }
         if (this.refreshNext) {

kanban-client/app/constants/url.dev.json

@@ -1,4 +1,4 @@
 {
-    "defaultPath": "http://183.238.39.179:8099/kanban/panelView/parseData/{code}?index={index}",
-    "completelyPath": "http://183.238.39.179:8099/kanban/panelView/parseData/{code}?index={index}&kanbanCode={kanbanCode}"
+    "defaultPath": "http://localhost:8098/panelView/parseData/{code}?index={index}",
+    "completelyPath": "http://localhost:8098/panelView/parseData/{code}?index={index}&kanbanCode={kanbanCode}"
 }

kanban-client/app/data/g2testdata.json

@@ -1,312 +0,0 @@
-[
-  {
-    "time": "9/1",
-    "price": 10,
-    "name": "商品A"
-  },
-  {
-    "time": "9/1",
-    "price": 30,
-    "name": "商品B"
-  },
-  {
-    "time": "9/2",
-    "price": 12,
-    "name": "商品A"
-  },
-  {
-    "time": "9/2",
-    "price": 32,
-    "name": "商品B"
-  },
-  {
-    "time": "9/3",
-    "price": 11,
-    "name": "商品A"
-  },
-  {
-    "time": "9/3",
-    "price": 35,
-    "name": "商品B"
-  },
-  {
-    "time": "9/4",
-    "price": 15,
-    "name": "商品A"
-  },
-  {
-    "time": "9/4",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/5",
-    "price": 20,
-    "name": "商品A"
-  },
-  {
-    "time": "9/5",
-    "price": 42,
-    "name": "商品B"
-  },
-  {
-    "time": "9/6",
-    "price": 22,
-    "name": "商品A"
-  },
-  {
-    "time": "9/6",
-    "price": 35,
-    "name": "商品B"
-  },
-  {
-    "time": "9/7",
-    "price": 21,
-    "name": "商品A"
-  },
-  {
-    "time": "9/7",
-    "price": 36,
-    "name": "商品B"
-  },
-  {
-    "time": "9/8",
-    "price": 25,
-    "name": "商品A"
-  },
-  {
-    "time": "9/8",
-    "price": 31,
-    "name": "商品B"
-  },
-  {
-    "time": "9/9",
-    "price": 31,
-    "name": "商品A"
-  },
-  {
-    "time": "9/9",
-    "price": 35,
-    "name": "商品B"
-  },
-  {
-    "time": "9/10",
-    "price": 32,
-    "name": "商品A"
-  },
-  {
-    "time": "9/10",
-    "price": 36,
-    "name": "商品B"
-  },
-  {
-    "time": "9/11",
-    "price": 28,
-    "name": "商品A"
-  },
-  {
-    "time": "9/11",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/12",
-    "price": 29,
-    "name": "商品A"
-  },
-  {
-    "time": "9/12",
-    "price": 42,
-    "name": "商品B"
-  },
-  {
-    "time": "9/13",
-    "price": 40,
-    "name": "商品A"
-  },
-  {
-    "time": "9/13",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/14",
-    "price": 41,
-    "name": "商品A"
-  },
-  {
-    "time": "9/14",
-    "price": 38,
-    "name": "商品B"
-  },
-  {
-    "time": "9/15",
-    "price": 45,
-    "name": "商品A"
-  },
-  {
-    "time": "9/15",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/16",
-    "price": 50,
-    "name": "商品A"
-  },
-  {
-    "time": "9/16",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/17",
-    "price": 65,
-    "name": "商品A"
-  },
-  {
-    "time": "9/17",
-    "price": 38,
-    "name": "商品B"
-  },
-  {
-    "time": "9/18",
-    "price": 45,
-    "name": "商品A"
-  },
-  {
-    "time": "9/18",
-    "price": 36,
-    "name": "商品B"
-  },
-  {
-    "time": "9/19",
-    "price": 50,
-    "name": "商品A"
-  },
-  {
-    "time": "9/19",
-    "price": 30,
-    "name": "商品B"
-  },
-  {
-    "time": "9/20",
-    "price": 51,
-    "name": "商品A"
-  },
-  {
-    "time": "9/20",
-    "price": 29,
-    "name": "商品B"
-  },
-  {
-    "time": "9/21",
-    "price": 65,
-    "name": "商品A"
-  },
-  {
-    "time": "9/21",
-    "price": 28,
-    "name": "商品B"
-  },
-  {
-    "time": "9/22",
-    "price": 60,
-    "name": "商品A"
-  },
-  {
-    "time": "9/22",
-    "price": 25,
-    "name": "商品B"
-  },
-  {
-    "time": "9/23",
-    "price": 62,
-    "name": "商品A"
-  },
-  {
-    "time": "9/23",
-    "price": 28,
-    "name": "商品B"
-  },
-  {
-    "time": "9/24",
-    "price": 65,
-    "name": "商品A"
-  },
-  {
-    "time": "9/24",
-    "price": 29,
-    "name": "商品B"
-  },
-  {
-    "time": "9/25",
-    "price": 45,
-    "name": "商品A"
-  },
-  {
-    "time": "9/25",
-    "price": 30,
-    "name": "商品B"
-  },
-  {
-    "time": "9/26",
-    "price": 55,
-    "name": "商品A"
-  },
-  {
-    "time": "9/26",
-    "price": 40,
-    "name": "商品B"
-  },
-  {
-    "time": "9/27",
-    "price": 59,
-    "name": "商品A"
-  },
-  {
-    "time": "9/27",
-    "price": 32,
-    "name": "商品B"
-  },
-  {
-    "time": "9/28",
-    "price": 52,
-    "name": "商品A"
-  },
-  {
-    "time": "9/28",
-    "price": 33,
-    "name": "商品B"
-  },
-  {
-    "time": "9/29",
-    "price": 53,
-    "name": "商品A"
-  },
-  {
-    "time": "9/29",
-    "price": 34,
-    "name": "商品B"
-  },
-  {
-    "time": "9/30",
-    "price": 40,
-    "name": "商品A"
-  },
-  {
-    "time": "9/30",
-    "price": 30,
-    "name": "商品B"
-  },
-  {
-    "time": "9/31",
-    "price": 45,
-    "name": "商品A"
-  },
-  {
-    "time": "9/31",
-    "price": 35,
-    "name": "商品B"
-  }
-]

kanban-client/app/main.dev.js

@@ -29,7 +29,7 @@ if (!window.Promise) {
 	window.Promise = Promise;  
 }  
 
-var code = '10626BB19FDD';
+var code = 'B9E84580644';
 var index = 0;
 
 ReactDOM.render(