Question

下面是我的三个功能。我正在3中调用函数1和2，但出现错误。我的文字未显示在画布中。仅显示图像。如何使功能延迟文本功能，直到make_base完成加载。

功能1

function make_base(img) {
    base_image = new Image();
    base_image.src = img;
    base_image.onload = function(){
        context.drawImage(base_image, 0, 0);
    }

}

功能2

function text(text) {
    context.fillText(text, 50, 50)
}

功能3

function render() {
    make_base(xxx)
    text(xxx)
}

我用过setTimeout无效，因为有时make_base加载时间很少。

Answer 1

只需在text() onload函数内部调用make_base()函数，以便在text()函数完成其所有变量声明的加载后，make_base()函数的加载如下： / p>

function text(text) {
    context.fillText(text, 50, 50)
}

function make_base(img) {
    base_image = new Image();
    base_image.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
    base_image.onload = function(){
        context.drawImage(base_image, 0, 0);
        text(text);
    }
}

function render() {
    make_base(img);
}

Answer 2

好吧，因为它是一个异步任务，所以您需要添加逻辑以告知下一个代码何时运行。经典方法是使用回调方法：

LocalDate input = ...;
if (!(input.isBefore(a) && input.isAfter(b))) {
    // set the field
} else {
    // handle error here
    // throw exception or just print something
}

或进入现代模式是使用诺言

function make_base(img, callback) {
  base_image = new Image();
  base_image.src = img;
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
    callback()
  }
}

function text(text) {
  context.fillText(text, 50, 50)
}

function render() {
  make_base(xxx, function () {
    text(xxx)
  })
}

Answer 3

make_base正在执行异步操作，并在该操作完成时添加回调：

base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
}

如果您希望在该回调之后调用text函数，请将其放在回调函数中：

function make_base(img) {
    base_image = new Image();
    base_image.src = img;
    base_image.onload = function(){
        context.drawImage(base_image, 0, 0);
        text();
    }
}

//...

function render() {
    make_base(xxx);
}

执行另一个函数后的JavaScript调用函数

3 个答案: