【JavaScript DOM编程艺术(第2版)】第十章疑难点_dom编程艺术第十章字符串的问题-CSDN博客

在《JavaScript DOM编程艺术（中文第二版）》一书第10章中有一段移动元素的代码如下：

function moveElement(elementID,final_x,final_y,interval) {  
  if (!document.getElementById) return false;  
  if (!document.getElementById(elementID)) return false;  
  var elem = document.getElementById(elementID);  
  var xpos = parseInt(elem.style.left);  
  var ypos = parseInt(elem.style.top);  
  if (xpos == final_x && ypos == final_y) {  
    return true;  
  }  
  if (xpos < final_x) {  
    xpos++;  
  }  
  if (xpos > final_x) {  
    xpos--;  
  }  
  if (ypos < final_y) {  
    ypos++;  
  }  
  if (ypos > final_y) {  
    ypos--;  
  }  
  elem.style.left = xpos + "px";  
  elem.style.top = ypos + "px";  
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";  
  movement = setTimeout(repeat,interval);  
}

其中 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";这段代码研究了很久，终于看明白了，现在写下来，留作参考。

分析如下
这行代码的意思是重新调用本函数。
首先要知道setTimeout()函数的第一个参数是一个字符串，Javascript用引号表示字符串，用 “+”号连接字符串：

repeat ="moveElement('" +elementID +"'," +final_x+","+final_y+","+interval+")";

然后将字符串的双引号去除，所要拼接的部分就是以下几个：

moveElement(' 和 elementID 和 ', 和 final_x 和 ,和 final_y 和 , 和 interval 和 )

拼接以后如下：

moveElement('elementID',final_x,final_y,interval);

现在来做一些假设如下:

elementID = 'message'    //javascript中单双引号是一样的  
final_x = 100;  
final_y = 200;  
interval = 10;

将变量用以上参数代替后如下：

moveElement('message',100,200,10);

开始的错误思路
我曾经想过是否可以这样写：

var repeat = "moveElement("+elementID+","+final_x+","+final_y+","+interval+")";

这种写法是不对的，用以上方法替换掉变量后得到的结果是：

moveElement(message,100,200,10);

注意其中message没有引号，所以会被误判为变量。

总结
这里的主要问题是单引号被分在两个字符串中，太多的引号很难分辨，只要弄明白了moveElement('和',是两个字符串就很容易理解了。