Javascript HTML图像在页面加载和异步等待事件后未正确更新

我期待的流量：

在页面加载时，渲染图像的轮廓

在文本字段中输入猜测或点击按钮以显示轮廓中的图像

获取新图像并使用新图像的轮廓重新呈现页面

问题在于所渲染的轮廓是前一幅图像的轮廓，而不是当前api响应中的图像
页面加载时很明显，因为剪影和图片第一次是空白的
当你点击“下一步”时，新的轮廓不会显示，因为旧的轮廓没有消失

要么：

异步等待逻辑和语法中存在错误

由于异步，DOM div未正确更新

图像元素的行为方式存在一些问题

设置和获取HTML对象时出现问题

还有什么我看不到的问题吗

我所尝试的：

在代码中，我尝试在异步之后直接设置

document.getElementById（“sourceImg”）

和

document.getElementById（“剪影img”）

，而不是在第59行和第69行设置变量

sourceImg

和

剪影img

，它似乎没有改变任何东西

另外，对于异步回调中的最后一个函数，我没有设置超时，这没有什么区别

而且，我也试过了，没什么不同

api有一些不完整的数据，如果您得到的是空/坏图像，则在测试期间跳过所有空响应
（在一整页中打开纯javascript）

身体{
字体系列：monospace；
}
.居中{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：24px；
}
#页脚{
位置：固定；
底部：0；
左：0；
右：0；
文本对齐：居中；
}
变量id
变量名
var sourceImg=document.createElement（'img'）；
setAttribute（'id'，“sourceImg”）；
setAttribute（'crossorigin'，'anonymous'）；
var-img=document.createElement（'img'）；
setAttribute（'id'，“剪影img”）；
setAttribute（'crossorigin'，'anonymous'）；
//+“？”+新日期（）.getTime（）crossorigin=“匿名”
函数随机整数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
函数getscreept（）{
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（'2d'）；
如果（sourceImg.width！=0）{
//学分：https://dominoc925.blogspot.com/2012/08/javascript-example-code-to-create.html
canvas.width=sourceImg.width；
canvas.height=sourceImg.height；
ctx.drawImage（sourceImg，0,0）；
var imgData=ctx.getImageData（0,0，canvas.width，canvas.height）；
var pix=imgData.data；
//将图像转换为轮廓
对于（变量i=0，n=pix.length；i