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)};這樣更容易讀一些，效果也徹底同樣。