时间戳

首页 > 解决方案 > 将变量属性新值添加到以前的值（javascript）

javascript - 将变量属性新值添加到以前的值（javascript）

问题描述

下午好。是否可以将新的对象属性值添加到其先前的值？我尝试了以下代码，但浏览器返回“超出最大调用堆栈大小”。属性 translate 将用于水平拖动图表。它将移动将在画布图表上绘制的数组的数据范围。亲切的问候。

function drawChart() {
   .
   .
   .
   tickerData = [..., ..., ...];
   dataLength = tickerData.length;
   barSpace = Number(localStorage.getItem("barspace"));
   barWidth = (0.7 * barSpace).toFixed(1);
   rightSpan = 3 * barSpace;
   barStrokeWidth = 1;
   if(!(dataLength - dragCanvas.translate() > dataLength)) {
      dataLength = dataLength - dragCanvas.translate();
   }
   else {
      dataLength = dataLength;
   }
   .
   .
   .
}
var dragCanvas = {
   isTrue : false,
   drag : [0, 0],
   translate : function() {
      return this.translate() + Math.ceil((this.drag[1] - this.drag[0])/barSpace);
   }
};

function updateChartPaint(e) {
   var pointerX = e.clientX;
   var pointerY = e.clientY;
   if(!dragCanvas.isTrue) {
      dragCanvas.drag[0] = pointerX;
      dragCanvas.drag[1] = pointerX;
   }
   else {
      dragCanvas.drag[1] = pointerX;
      $("#chartCanvas").empty();
      drawChart();
   }
}

document.addEventListener("mousemove", updateChartPaint, false);
document.getElementById("chartCanvas").onmousedown = function() { 
   dragCanvas.isTrue = true;
};
document.getElementById("chartCanvas").onmouseup = function() {
   dragCanvas.isTrue = false;
};

标签： javascriptjavascript-objects

解决方案

您this.translate()在函数内部调用，translate因此它进入一个无限循环调用自身，直到最终超出调用堆栈。

从translate调用方式来看，该函数应该像这样定义：

translate : function() {
  const newTranslate = this.oldTranslate + Math.ceil((this.drag[1] - this.drag[0])/barSpace);
  this.oldTranslate = newTranslate;
  return newTranslate;
}
oldTranslate: 0

我假设它barSpace是在函数之外声明的，并且将是一个有效值。它似乎是从设置的，localStorage但如果它不存在，Number(localStorage.getItem("barspace"))则将为零，并且从的返回值translate将是Infinity。这是故意的吗？

还updateChartPaint设置了一个名为pointerY但从不使用它的变量。忽略 Y 轴的拖动并且只有 X 轴的变化才重要，这是否正确？

推荐阅读