Javascript的setTimeout函数没有调用

Question

setTimeout函数总是给我带来麻烦.现在我有一个递归的函数(通过setTimeout调用自身)并更改元素高度.

该函数发送两个参数:要更改的元素和元素的最大高度.该功能的目的是展开元素,或以恒定的速度"向下滑动".我知道我可以用jQuery解决这个问题,但我正在尝试自己的功能.

function slide_down(element, max_height)
{   
    if(element.clientHeight < max_height)
    {
        var factor = 10;
        var new_height = (element.clientHeight + factor >= max_height) ? max_height : (element.clientHeight + factor);
        element.style.height = new_height + 'px';

        var func_call = 'slide_down(' + element + ', ' + max_height + ');';
        window.setTimeout(func_call, 10);
    }
}

我在最初调用函数时测试了参数.max_height设置为20,因为它是所需的高度元素(我从.scrollHeight获得此值).

当函数完成后,我想让它自己调用,直到max_height是元素的高度.我用这个setTimeout调用来做到这一点:

var func_call = 'slide_down(' + element + ', ' + max_height + ');';
window.setTimeout(func_call, 10);

它不起作用.这确实有效:

var func_call = 'alert(1);';
window.setTimeout(func_call, 10);

我也尝试将函数调用直接放入setTimeout语句,仍然无法正常工作.

请注意,元素的高度DOES会更改第一次迭代,该函数永远不会调用自身.所以元素变量设置正确,我使用alert()来显示max_height也是正确的.

alert(func_call);

提醒:

slide_down([object HTMLParagraphElement], 20);

Answer 1

当你这样做:

var func_call = 'slide_down(' + element + ', ' + max_height + ');';

你正在将元素转换为字符串,所以你的超时会是这样的

slide_down("[Object]", 100);

这显然是行不通的.

你应该做的是创建一个闭包 - 它有点复杂,但基本上你创建了一个函数,旧函数中的局部变量仍然可以在新函数中使用.

function slide_down(element, max_height)
{   
    if(element.clientHeight < max_height)
    {
        var factor = 10;
        var new_height = (element.clientHeight + factor >= max_height) ? max_height : (element.clientHeight + factor);
        element.style.height = new_height + 'px';

        var func = function()
        {
            slide_down(element, max_height);
        }

        window.setTimeout(func, 10);
    }
}

10还有一点暂停 - 我建议至少使用50.