循环添加图像到文档[关闭]答案

【问题标题】：adding images to document in loop [closed]循环添加图像到文档[关闭]
【发布时间】：2015-12-15 22:27:11
【问题描述】：

我已经编写了这段 javascript 代码来在延迟 3 秒后添加图像，但是这段代码无法正常工作，请帮助。

function start() {
    while(true) {
        setTimeout(addObstracles(), 3000)
    }
}

function addObstracle() {
        var element = document.createElement('img');    
        element.id = 'obs';
        element.className = 'obstracleAnimation';
        element.src = 'enemy.png';
        element.style.position = 'absolute';
        element.style.top = '0px';
        element.style.left = '100%';
        element.style.width = '150px';
        element.style.height = '100px';
        document.body.appendChild(element);
}

【问题讨论】：

更好地定义“不工作”。
图片未生成
可能是因为您在 setTimeout 调用中调用 addObstracles，而该方法没有返回任何内容..
是否有任何开发控制台错误？
javascript setTimeout() not working的可能重复

标签： javascript

【解决方案1】：

setTimeout 采用函数引用。你有一个函数调用。

有多种写法：

setTimeout('addObstracles()', 3000) //i don't like this way
setTimeout(addObstracles, 3000) // pass the reference (I like this way!)
setTimeout(function() {
    addObstracles()
}, 3000) //I like this when `addObstracles has parameters!

【讨论】：

他也调用 addObstacles 而不是 addObstacle。
@SajalAli 检查您的 JavaScript 控制台，您会看到一些不错的红色错误消息，它们可以帮助您解决问题

【解决方案2】：

就像 Sterling 在他的回答中提到的那样，您正在调用函数 addObstracles 而不是将其传递给 setTimeout，只是我想补充一点，因为您在固定时间间隔设置 timout 函数，您可以使用 setInterval代替函数：

function start() {
    setInterval (addObstracles, 3000);
}

JSFiddle

【讨论】：

还是不行，这会冻结浏览器
id 属性是唯一的，您只能将其分配给一个元素，请从您的代码中删除 element.id = 'obs';。

【解决方案3】：

此代码存在多个问题。我将在答案中添加以下内容：

小心你定义的函数和调用的函数：something != somethings
在调用 start() 函数时要小心：它必须在 body 标记之后，否则 body.appendChild 将不存在
请注意如何设置元素的样式。使用当前样式，它根本不显示。我刚刚删除了element.style.position = 'absolute'; 使其可见
确保您尝试显示的图像与脚本位于同一文件夹中

【讨论】：