请教：函数参数引起的一个问题

本帖最后由 mycggo 于 2012-11-26 14:56:22 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Settimeout Demo</title>
<style>
*{ margin:0; padding:0; list-style-type:none; }
body{ padding: 2em; font: 1em/1.6 Helvetica, sans-serif; }
/********/
#msg p{ padding: 4px 10px; line-height: 60px; border: 1px solid #aaa; background: #ffc; color: #00c; }
#msg{ height: 0; overflow: hidden; }
.cors{ line-height: 3; text-align: right; padding: 0 10px; }
.cors a{ text-decoration: none; padding: 0 10px; }
.info{ color: #888; }
</style>
</head>
<body>
<p class="cors">
    <a href="#" class="msg-below">below</a>
    <a href="#" class="msg-up">up</a>
    <a href="#" class="msg-stop">stop</a>
</p>
<div id="msg"><p>welcome to here</p></div>
<p class="info">With the Messages app on iPod touch. </p>
<script type="text/javascript">
var below=document.querySelector(".msg-below");
var mH=0;
var clearAm;
function belowH(eobj){
    if(mH<70){
        mH++;
/* 正常 */
/* document.getElementById("msg").style.height=mH+"px"; */
/* 错误，Console里提示：TypeError: 'null' is not an object (evaluating 'document.getElementById(em).style') */
        document.getElementById(eobj).style.height=mH+"px";
        clearAm=setTimeout(function () { belowH.call(this,eobj);},16);
    }
    else if(clearAm)
    {
        clearTimeout(clearAm);
    }

}
below.onclick=function(){ belowH("msg"); };
</script>
</body>
</html>
我这里测试没问题，不过IE8 下不支持方法document.querySelector
1楼++楼主的clearAm=setTimeout(arguments.callee,16); 只调用了反函数体,没有把参数传进去,导致实参成了NULL而报错.
document.getElementById(em) 没有找到 node, 返回 null
我主要测试setTimeOut功能和函数参数的，就临时采用document.querySelector了。
测试这两种方法都可以，第二种方法不是十分理解为什么居然可以。

1：clearAm=setTimeout(function(){ belowH.call(this,eobj); }, 12);
2：clearAm=setTimeout(function(){ belowH(eobj); }, 12);
没什么区别都是利用闭包保存了局部变量eobj作为参数传递，使用call可以让函数执行时的this指向标签a，而不是window。个人理解。