1

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

2 回答 2

0

您可以通过使用来简化这一点（删除脚本生成）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;
}

（小提琴）

编辑

是的，我猜 OP 代码的唯一问题是它将字符串传递给setTimeout，而不是函数本身：

var loopTimer = setTimeout(function() {
    grow(elementL, elementR);
},50);
于 2013-10-15T22:58:25.500 回答
0 
setTimeout('grow(\''+elementL+','+elementR+'\')',50)

需要是

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

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

setTimeout(function() {
    grow(elementL, elementR);
}, 50)
于 2013-10-15T23:02:18.847 回答