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

By | 03月31日
Advertisement

  最近在学习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);

 

Similar Posts:

  • JavaScript学习笔记——变量,作用域和内存管理

    JavaScript学习笔记--Javascript基本语法 本文是对<Professional:JavaScript for Web Developers>第四章:Variables,Scope, and Memory所做的笔记 ---------------------------------------------------------------------------------- JavaScript中,变量分为两个类型,分别是Primitive类型和Reference类型. 其

  • Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Ja

  • JavaScript 学习笔记(1):关于函数、对象以及面向对象

    JavaScript 学习笔记(1):关于函数.对象以及面向对象 最一开始以C++.Java.C#之类的语言的思维的方式去理解JavaScript,结果各种被瞎眼.最终接触得稍微多了点之后,才终于回过神来,原来JavaScript根本不是我想象中的那种东西. 在这里记录一下自己学习中的感想.如果能帮上其他和我一样刚刚入门的新手或者得到老手的指正和建议,这都是再好不过的事情了. 因为是学习笔记而不是教程,所以面向的读者是"至少稍微用过JavaScript一点点"的人. 以下正文. 1.

  • Javascript学习笔记9——prototype封装继承

    在上文中,我利用prototype的原理做了一个封装的New,然后我就想到,我是否可以用prototype的原理进一步封装面向对象的一些基本特征呢?比如继承. 好,那就让我们一步步打造,首先让我们来看下继承原本的写法: <script> var Person = function(name, age) { this.name = name; this.age = age; } Person.prototype.SayHello = function () { alert(this.name +

  • JavaScript学习笔记(九)——作品的不足与改进

    JavaScript学习笔记(九)--作品的不足与改进 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^

  • javascript学习笔记之四

    javascript学习笔记四---数组与排序 上节中,我们讨论了javascript的循环结构,本节将讨论javascript中的另一个重点知识-数组以及排序. 1.数组 数组是语言学习中的基础知识 ,下面我们将介绍javascrip中数组的定义与使用. 1)定义方式1 var a=[1,2,3,4,5];//直接定义并且赋值 2)定义方式2 var a=new Array();//定义空数组,不向内部添加内容. a[0]=1;a[1]=2; a[2]=3;a[3]=4; a[4]=5; 3)

  • Javascript学习笔记 (转 )

    js学习笔记,别错过!很有用的. ///////////////////////////////////////////////////////////////////////////////////////// 一.验证类 1.数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2.时间类 2.1 短时间,形如 (13:04:06) 2.2 短日期,形如 (2003-12-05) 2.3 长

  • 《JavaScript学习笔记》:拖拽

    <JavaScript学习笔记>:拖拽 拖拽在我们的生活中比较常见,原理也不难,如下: 假设有一个框,我们想要这个框有拖拽行为,拖拽行为就是跟着我们的鼠标移动而移动,而获取鼠标的位置的方法为: var x = oEvent.clientX; var y = oEvent.clientY; 当我们鼠标点击(鼠标点击对应onmousedown事件)时,我们记录鼠标此时的位置与框的距离(即图示中所表明的disX,disY),而disX是有鼠标所在的位置的横坐标和框的left决定,而disY是由鼠标所

  • 《JavaScript学习笔记》:DOM基础

    <JavaScript学习笔记>:DOM基础 DOM 节点 1.childNodes 获取子节点(包括文本节点和元素节点) 2.children 获取子节点(只包括元素节点) 3.nodeType 判断节点类型 nodeType =3 :此节点为文本节点 nodeType =1 :此节点为元素节点 看一个例子:对上面知识点的一个练习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • 10 声明字符串"javascript学习笔记,String字符串相关!" ( 追加和替换这两种用法做不出)

    <script language="javascript"><!--// 声明字符串"javascript学习笔记,String字符串相关!"var txt = "javascript学习笔记,String字符串相关!"document.write( "<br>" ); // 取得字符串长度document.write(txt.length);document.write( "<b

Tags: