Question

我正在阅读DOM Scripting，并且有一个关于下面抽象的初学者问题。原始代码不包含“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
}

Answer 1

属性永远不会是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);
}

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

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

将全局变量抽象为属性？

1 个答案: