JavaScript学习笔记 -- 变量作用域问题

  最近在学习JavaScript DOM编程,写一个动画特效时用到了setTimeout以求实现动画,但是动画效果却不正确,发现其关键问题是全局变量引起的,在实现动画过程中,为了能重复调用一个函数,将setTimeout的运行结果赋值给了一个全局变量,如下所示:

var repeat = "moveElement(...)";
movement = setTimeout(repeat, interval);

这留下了一个隐患,当前面的动画尚未显示完毕时,若动画效果再一次被触发,它就会出现异常行为,不停抖动。

  为了消除动画滞后的现象,可以用clearTimeout函数清除积累在setTimeout队列里的事件。但是第一个问题来了,倘若movement为一个全局变量,那么如果在还没有设置movement变量之前就执行这条语句,将会引发错误。

  那么局部变量如何呢?不能使用局部变量,因为这样的话clearTimeout函数调用语句将无法工作,局部变量movement在clearTimeout函数的上下文里不存在。

  全局变量和局部变量都不行,也就是说我们需要一种介乎它们二者之间的东西,需要一个只与某个特定元素有关的变量。

  这种变量就是属性,JavaScript允许我们为元素创建属性,属性就相当于专属于某个特定元素的变量。到此,问题解决!解决后代码如下:

var repeat = "moveElement(...)";
elem.movement = setTimeout(repeat, interval);

 

 

posted @ 2012-08-19 21:56  Polar Bear  阅读(220)  评论(0编辑  收藏  举报