Javascript 逐渐增加宽度

Question

我正在尝试使用超时逐渐增加 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);
        }

Answer 1

您可以使用 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;
}

(Fiddle)

编辑

是的，我想OP代码的唯一问题是它向setTimeout传递了一个字符串，rather than the function itself :

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