Javascript 逐渐增加宽度

我试图使用超时来逐渐增加javascript中2个id的元素。我可以让一个运行，但当试图调用另一个元素到同一个函数中时，它只进行一次迭代，然后在第一次递归调用后崩溃

我给元素传递了两个id。我希望左边的元素逐渐增加，右边的元素逐渐增加宽度

这是我得到的

        function grow(elementL, elementR)
        {       
                var htL = parseInt(document.getElementById(elementL).style.width,10);
                var htR = parseInt(document.getElementById(elementR).style.width,10);
                var movementL = htL + 5;
                var movementR = htR - 5;
                document.getElementById(elementL).style.width = movementL + 'px';
                document.getElementById(elementR).style.width = movementR + 'px';
                if (movementL > 1000) {
                    clearTimeout(loopTimer);
                    return false;
                }
                var loopTimer = setTimeout('grow(\''+elementL+','+elementR+'\')',50);
        }

您可以通过使用

setInterval

来简化此过程（删除脚本生成）——这将重复函数调用，直到取消它

function grow(elementL, elementR)
{       
    var loopTimer = setInterval(function() { 
        if (!growStep(elementL, elementR)) {
            clearInterval(loopTimer);
        }
    }, 50);
}
function growStep(elementL, elementR) {
    var htL = parseInt(document.getElementById(elementL).style.width,10);
    var htR = parseInt(document.getElementById(elementR).style.width,10);
    var movementL = htL + 5;
    var movementR = htR - 5;
    document.getElementById(elementL).style.width = movementL + 'px';
    document.getElementById(elementR).style.width = movementR + 'px';
    if (movementL > 1000) {
        return false;
    }
    return true;
}

编辑

是的，我猜操作码唯一的问题是它将字符串传递给

setTimeout

，：

需要

setTimeout('grow(\''+elementL+'\',\''+elementR+'\')',50)
//                             ^^ ^^

工作。但不要那样做。将函数表达式传递给：

---

这不只是一个注释吗？我不知道它如何解决OP不工作的问题？用setInterval替换setTimeout？谢谢，它起作用了：）现在我可以摆弄我的条件以得到我想要的。永远不要将字符串传递给

setTimeout

，传递函数！下次执行函数时，

looptimer

变量将不在范围内。此外，在执行该函数时，超时已经触发，无法清除。你不应该再安排另一个，而不是试图澄清一些事情。编辑：好，使用if语句中的

return

ing，您实际上已经这样做了。但是您仍然不需要

clearTimeout

。啊，是的，我没有看到。谢谢谢谢，我以后将使用该函数调用！：D

setTimeout('grow(\''+elementL+','+elementR+'\')',50)

setTimeout('grow(\''+elementL+'\',\''+elementR+'\')',50)
//                             ^^ ^^

setTimeout(function() {
    grow(elementL, elementR);
}, 50)