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

Question

 我把有关的贴出来。全部代码在最下面
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);
}

Answer 1

计时器第一个参数尽量不要用字符串，而是匿名函数（需要传入参数）或者直接要执行的函数名称（对于不需要参数的），字符串是用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的值)

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