DOM编程艺术-setTimeout，"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"

DOM编程艺术一个小demo，看到这里的时候不理解

"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"

这么多引号一下就看蒙圈了

function moveElement(elementID,final_x,final_y,interval) {

  if (!document.getElementById) return false;

  if (!document.getElementById(elementID)) return false;

  var elem = document.getElementById(elementID);

  if(elem.movement){

    clearTimeout(ele.movement)

  }

  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+")";

  elem.movement = setTimeout(repeat,interval);

}  

其中 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";这段代码研究了很久，现在分析明白了

因为setTimeout的第一个参数是一个字符串，所以repeat是一个字符串，+ 代表链接字符串，双引号里面的单引号是加在elementID这个参数上的，因为getElementById的参数是要带引号的。

还有一个问题是

elem.movement = setTimeout(repeat,interval);

为什么把setTimeOut赋值给对象的属性，不直接赋值给全局变量或局部变量，感觉这部分书里面讲的有点模糊，看了还是没明白，查了一下资料

1、如果使用全局变量，当有多个元素需要运动的时候，就需要声明多个变量来存放这些元素对应的定时器；

2、使用局部变量虽然不需要声明多个变量，但是有时候需要在外部判断一个元素是否正在运动，由于在函数外部访问不到该函数内的变量，从而无法拿到该元素对应的定时器值；

3、将定时器挂载在元素的自定义属性上就可以在任何地方都能拿到该定时器的值，从而知道该元素是否在运动；