js setTimeout函数

最近在看JS DOM编程艺术,在第十章的动画里面有个setTimeout函数的例子中涉及了不少的引号,研究了好大一会才看明白,综合网上各个大神的解释和本身的理解,其原理是这样的:编程

首先看下程序源代码:函数

 1 function moveElement(elementID,final_X,final_Y,interval){
 2     if(!document.getElementById) return false;
 3     if(!document.getElementById(elementID)) return false;
 4     var elem = document.getElementById(elementID);
 5     var xpos = parseInt(elem.style.left);
 6     var ypos = parseInt(elem.style.top);
 7     if (xpos==final_X && ypos==final_Y){
 8         return true;
 9     }
10     if(xpos<final_X){
11         xpos++;
12     }
13     if(xpos>final_X){
14         xpos--;
15     }
16     if(ypos<final_Y){
17         ypos++;
18     }
19     if(ypos>final_Y){
20         ypos--;
21     }
22     elem.style.left = xpos +"px";
23     elem.style.top = ypos +"px";
24     var repeat = "moveElement('"+elementID+"',"+final_X+","+final_Y+","+interval+")";
25     moveMent = setTimeout(repeat,interval);
26 }
这段代码的功能是经过elementID得到元素每隔interval的时间移动元素的位置至final_X,final_Y。
为了使函数可以一直执行到最终位置须要调用setTimeout来循环执行,可能不少初学者像我同样卡在了repeat变量这里。咱们首先看setTimeout(code,millisec),其中code能够为字符串或者函数,在本例中做者采用了字符串的形式来传值。若是咱们相用字符串的话须要将变量 elementID final_X final_Y interval 和其余的常量一块儿拼起来作成以下的效果:setTimeout(moveElement('elementID',final_X,final_Y,interval),interval).也就是说setTimeout 里面的repeat = moveElement('elementID',final_X,final_Y,interval) 那么拼接前是这样的:moveElement('elementID',final_X,final_Y,interval)字符串的拼接只须要在每一个字符上面加上双引号就好了 最终就是:repeat = "moveElement('"+elementID+"',"+final_X+","+final_Y+","+interval+")"; 特别注意不要把 "" 给弄混掉了。另外若是直接传给setTimeout变量函数的话是这样的:repeat = function(){moveElement(elementID,final_X,final_Y,interval)};这样更容易读一些,效果也彻底同样。
相关文章
相关标签/搜索