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语句中,但仍无法正常工作。
请注意,在第一次迭代时元素的高度确实会发生变化,只是函数从未调用自身。因此元素变量被正确设置,并且我使用alert()显示的max_height值也是正确的。
alert(func_call);
警告信息如下:
slide_down([object HTMLParagraphElement], 20);