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);

Answer 2

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

需要

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

上班。但是不要这样做。将函数表达式传递给setTimeout：

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

Javascript逐渐增加宽度

2 个答案: