问题描述
使用带有回调的loadJSON()加载数据会不断重复加载输入数据文件。容器中的项目数量持续增长,浏览器速度减慢,直到内存不足。
预期结果
在完全读取输入数据后,请停止使用loadJSON()加载数据。
FILELIST.json中的示例内容
例如,数据仅包含14个JSON条目的数组(现在仅使用BYTES作为椭圆大小)
{"BYTES":"97488","MONTH":"sep","DAY":"01","YEAR":"2018","PATH":"./addons/p5.dom.js"},
其中的每一个在异步加载后都绘制为椭圆形。
var framerate = 2;
var containers = [];
var canvas_x = 700
var canvas_y = 500
var container_largest = 0;
function setup() {
createCanvas(canvas_x,canvas_y);
setInterval(getData,1000);
}
function getData() {
loadJSON("../FILELIST.json", gotData);
}
function gotData(data) {
spaceData = data;
console.log(data);
// Handle new data
for (var i = 0; i < spaceData.length; i++) {
bytes = spaceData[i].BYTES;
if (bytes > 0) {
containers.push(new Container(bytes));
}
if (bytes > container_largest) {
container_largest = bytes;
}
}
}
function draw() {
background(0);
frameRate(framerate)
// Run all containers
for (var i = 0; i < containers.length; i++) {
containers[i].run(containers);
}
}
function Container(size) {
this.size = size;
//console.log(size);
}
Container.prototype.run = function(containers) {
this.render();
}
Container.prototype.render = function() {
fill(255);
rel_size = int(this.size/container_largest);
rel_size = int(canvas_x / (rel_size*containers.length));
ellipse(random(canvas_x) ,random(canvas_y), rel_size, rel_size);
}