Question

我必须使用名为GKChart的JavaScript类： -

class GKChart {   
  constructor(data) {
    try {
      console.info("Enter: Chart Designing initialize function");
      this.chartID = data.id;
      this.chartData = data.data;
      this.chartCall = new chartCalling();
      this.load = this.initialize(this.chartData.config.chartType, this.chartData, this.chartID, this.chartCall);
      this.load();
      this.resize(this.load);
      console.info("Exit: Chart Designing initialize function");
    } catch (err) {
      console.log("Error Found in GKChart Constructoru", err);
    }   
  }
  initialize(chartTypeLoad, chartDataLoad, chartIDLoad, chartCallLoad) {
    try {
      console.log("Start : initialize");
      let chartType = chartTypeLoad;
      let chartData = chartDataLoad;
      let chartID = chartIDLoad;
      var chartCall = chartCallLoad;
      /*Define chart css properties*/
      var loadIt = function() {
        console.warn("Resize Load : "+chartID);
        css(document.querySelector("#" + chartID), {
          'display': 'block'
        });

        switch (chartType) {
          case "line":
            {
              chartCall.lineChart(chartData, chartID);
              break;
            }
          case 'bar':
            {
              chartCall.barChart(chartData, chartID);
              break;
            }
          default:
            {
              console.log("Invalid choice of chart");
              break;
            }
        }
      }

      return loadIt;
      console.log("End : initialize");
    } catch (err) {
      console.error("Exception occurred in Home module:  " + err.message);
    }
  }

  resize(loadFun) {
    try {
        window.addEventListener("resize", function (e) {
          window.resizeEvt;
          window.addEventListener("resize", function () {
            clearTimeout(window.resizeEvt);
            window.resizeEvt = setTimeout(function () {
              loadFun();
              console.warn("ResizeCalled");
            }, 250);
          });
        });
    } catch (err) {
      console.log("error occured while resizing the chart");
    }
  }
}

我想用20多个圆顶数据实例调用这个类

new GKChart({id: "stepChartComparision", data: stepChartComparision});
new GKChart({id: "stepChartFill", data: stepChartFill});
new GKChart({id: "stepChartComparisionFill", data: stepChartComparisionFill});
...
...
...

所以对于这些所有的电话，我正在画一些画布图。为了使这些画布图表响应，我必须绘制每个图表以调整大小。所以我试图创建一个闭包函数来保存＆＃34; this.load＆＃34;函数，但我可以看到它只为最后一个实例调用一次。

请帮助我为每个通话实例获取它，或者换句话说，我想调整每个单一的画布图表。

谢谢。

Answer 1

My Closure工作正常但是由于ASYNC调用了setTimeout函数，只有最后一次调用正在运行，但是当我删除它并试图运行它时，它正常工作。

Ans Code是： -

resize(loadFun) {
    try {
        window.addEventListener("resize", function (e) {
          window.resizeEvt;
          window.addEventListener("resize", function () {
            loadFun();
          });
        });
    } catch (err) {
      console.log("error occured while resizing the chart");
    }
  }

每个类实例的闭包函数（JavaScript）

1 个答案: