javascript - 将全局变量抽象为属性？

我正在阅读DOM脚本，并且对以下抽象有一个初学者的问题。原始代码不包含“ clearTimeout”，并且“运动”被声明为全局变量。尽管代码运行良好，但动画效果并不流畅，因此添加了clearTimeout。但是，我的问题是，为什么我不能仅仅测试“运动”，而当它失败时（在对moveElement的第一次鼠标悬停调用上）继续进行其余的功能？如果我将“运动”保留为全局变量，而不是将其设置为属性，那么代码根本不会运行？

如果有助于查看其他JS和HTML，我已将其余代码插入jsFiddle中。

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) { //Why can't I use "movement"?
    clearTimeout(elem.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); //Originally global property
}​

最佳答案

属性永远不能是undefined，只能将undefined作为值。相反，变量可以是undefined（未定义）或具有undefined作为值。

当您说if (movement)时，在未定义movement的情况下，它将引发异常。

当您说if (elem.movement)时，在没有定义elem.movement的情况下，它将评估为false且条件无条件失败。

如果要将movement用作全局变量，则必须先声明它，然后再尝试通过以下方法从中读取它：

var movement;
function moveElement(elementID,final_x,final_y,interval) {
    ...
}

或者，您可以尝试将全局movement读取为属性，因为所有全局变量只是window对象的属性（在浏览器中）：

if (window.movement) { // this will never throw an exception
    clearTimeout(movement);
}

最后，您可以通过typeof运算符将if语句切换为可保护自己免受这些异常影响的语句：

if (typeof movement !== 'undefined') {
    clearTimeout(movement);
}