加载异步数据后在回调中调用 setup() 和 draw()

Question

我正在尝试将 p5.js 用于我的项目，但我在弄清楚如何在回调函数中调用 setup() 和 draw() 函数时遇到问题。

我的代码看起来像这样：

const sentence = "was a French statesman and military leader who rose led several successful close"
let formats = ["jpg", "png", "gif", "jpeg"]
let images = []

const separate_words = (sentence) => sentence.split(" ")

const width = window.innerWidth

const imageExists = (url, callback) => {
  var img = new Image();
  img.src = url;
  img.onload = () => { callback(true); };
  img.onerror = () => { callback(false); };
}


const build_canvas = (array_of_img_urls) =>{
  function setup() {
    createCanvas(width, 300);
    images = array_of_img_urls.map(url => loadImage(url))
  }

  function draw() {
    images.forEach(img => {
      image(img, 0, 0, img.width/images.length, img.height/images.length);
    })
  }
}

let items_processed = 0

formats.forEach((format, indexFormat, arrayFormat)  => {
  separate_words(sentence).forEach((name, indexWord, arrayWords) => {
    imageExists(`./images/${name}.${format}`, (exists) => {
      if(exists)
        images.push(`./images/${name}.${format}`)

      items_processed++
      if(items_processed === (arrayWords.length * arrayFormat.length)){
        build_canvas(images)
      }
    })
  })
})

如您所见，我正在创建一个图像路由数组，然后使用 5p.js 库尝试让这些图像显示在 canvas 中。

我的问题是，有没有办法在回调中调用这些函数，或者我是否会在 Node 中做一些后端，一旦加载完毕，就将数据插入？

Answer 1

您不应该自己打电话给 setup() 或 draw()。您应该让 P5.js 自动为您呼叫它们。通常这会在加载 P5.js 库时自然发生。

看来您应该重构代码，这样就不必调用 setup() 或 draw() 函数。这是一个粗略的想法：

var images = [];

function setup(){
    // load images
}

function draw(){
   // draw images
}

加载异步数据后在回调中调用 setup() 和 draw()

Calling setup() and draw() in a callback after async data is loaded

javascript

callback

p5.js