Question

我已经编写了这个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);
}

Answer 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!

Answer 2

就像他的anser中提到的Sterling一样，你调用函数addObstracles而不是将它传递给setTimeout，只是我想添加它，因为你在固定的时间间隔设置了timout函数你可以改为使用setInterval函数：

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

JSFiddle

Answer 3

此代码存在多个问题。我将在下面添加答案：

要小心你定义的功能和你调用的功能：某事！=某事
在您调用start()功能时要小心：它必须在身体标记之后或body.appendChild不存在
要小心你的元素样式。使用当前样式，它根本不显示。我刚刚删除element.style.position = 'absolute';以使其可见
确保您尝试显示的图片与脚本位于同一文件夹中

将图像添加到循环中的文档

3 个答案: