JS关于计时器函数传参

来源:互联网 发布:怎么才能在淘宝上卖东西 编辑:程序博客网 时间:2024/06/07 04:43

学前端的都知道函数方法,分为系统函数、自定义函数;有参函数、无参函数;有返回值函数、无返回值函数;有名函数、无名函数;
但是把作为新手的我最近碰到了一个奇特的事情,那就是计时器的普遍用法几乎不会传递参数,可是吧,就偏偏传一个参数进去就代码就能简单多了,情况是这样的:我要让很多div运动起来。

<div id="div0" style="width: 100%;height: 0px;background-color: #789;"></div><div id="div1" style="width: 0;height: 100px;background-color: #789;"></div><script type="text/javascript">    window.onload = function() {        var oDiv0=document.getElementById("div0");        var oDiv1=document.getElementById("div1");        var time = null;        var namber=0;        function a() {            namber++;            oDiv0.style.height=namber+"px";            oDiv1.style.width=namber+"px";            if (namber>=60) {                clearTimeout(time);                return ;            }            time=setTimeout(a,1);        }        a();    }</script>

那就要这样做,或者把宽和高分开来写,因为函数a里面一旦放参数。。。嗯~,就这样了
chrome

chrome

因为在计时器里用的时候是没有参数传递进去的,那么这样呢?

<div id="div0" style="width: 100%;height: 0px;background-color: #789;"></div><div id="div1" style="width: 0;height: 100px;background-color: #789;"></div><script type="text/javascript">    window.onload = function() {        var oDiv0=document.getElementById("div0");        var oDiv1=document.getElementById("div1");        var time = null;        var namber=0;        function a(b) {            namber++;            b.style.height=namber+"px";            if (namber>=60) {                clearTimeout(time);                return ;            }            time=setTimeout(a(b),1);        }        a(oDiv0);    }</script>

经过测试,浏览器干脆了,直接给我一个行高60px的div,我能怎么办,我也很绝望啊,于是好了,我直接回去复习计时器。


setInterval(a,5000);setInterval(function a(){   },5000);setTimeout(a,5000);

当看到这里的时候,相信很多人都已经想到了点什么,尤其是学过后台语言的人,就像点击事件一样,哎呀好气阿

oBtn.onclick=a(b);//是一种oBtn.onclick=function(){a(b)};//也是一种

那么最后也就做成一个方法就好了

<div id="div0" style="width: 100%;height: 0px;background-color: #789;"></div><div id="div1" style="width: 0;height: 100px;background-color: #789;"></div><script type="text/javascript">    window.onload = function() {        var oDiv0=document.getElementById("div0");        var oDiv1=document.getElementById("div1");        var time = [];        function a(b,c,d,e,f) {            b.style[c]=b[d]+1+"px";            if (b[d]>=e) {                clearTimeout(time[f]);                return ;            }            time[f]=setTimeout(function(){a(b,c,d,e,f);},1);        }        a(oDiv0,"height","offsetHeight",70,0);        a(oDiv1,"width","offsetWidth",70,1);    }</script>

参数是有点多阿,作为使用者,感觉time放在外面实在不实用,有待改进,那么计时器传递参数就到这里,其实上述事件都是假的,请别怀疑,只是觉得这个问题很容易被忽略所以指出来。
因为新人,还不知道怎么将网页调试结果放上来,想要调试的就自建一个文档将高光代码块复制到body标签里,文档后缀改为.html执行就好。