关于dom编程艺术动画部分一句代码的解释问题

 我把有关的贴出来。全部代码在最下面
function moveElement(elementID,final_x,final_y,interval) {.....
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  movement = setTimeout(repeat,interval);}.......

中间那条代码为什么要这么复杂。我看倒是能看懂,repeat就是一个函数字符串化,因为setTimeout第一个参数要是字符串
可为什么不这么写var repeat = "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);
  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);
}

计时器第一个参数尽量不要用字符串,而是匿名函数(需要传入参数)或者直接要执行的函数名称(对于不需要参数的),字符串是用eval执行的,存在xss漏洞并且效率低

 var repeat = moveElement(elementID,final_x,final_y,interval);///你这样写也是错误的,repeat得到的是moveElement的返回值,没有reutrn那么默认就是undefined,那么下面的计时器就没意义了
movement = setTimeout(function(){
 moveElement(elementID,final_x,final_y,interval);///
},interval);

setTimeout第一个参数如果是字符串,那么如果你传递的是变量,就是
var repeat = "moveElement(elementID,final_x,final_y,interval)你这种形式,那么变量必须要是window作用域下的(虽然eval执行,但是需要变量是wiindow作用域下的,这个和eval有区别,是当前作用域内的变量可以访问到),访问不到此时传入的参数,会报错

demo

     function aa(v) {
        eval('alert(v)')//1
        setTimeout('aa(v)', 2000)//2s后执行aa(v)报错,v is not defined
    }

    aa(1)

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

这样串接起来就是变为传递当前参数的值,由于elementID是字符串,必须要要变为引号括起

1)var repeat = "moveElement(elementID,final_x,final_y,interval)
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
这2中其实都是相当于执行下面的js代码

1)moveElement(elementID,final_x,final_y,interval)"
2)moveElement('elementID的值', final_x的值,final_y的值, interval的值)

所以为什么第一个是传递变量,第二个需要注意字符串类,非数字布尔变量需要引号括起

因为那是三个参数 你这么写就只是字符了啊

动画当然要不停的去执行了,js里面就用定时器