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);
Greg.. 19
当你这样做:
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.
当你这样做:
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.