在JavaScript中,为什么我们在用定时器控制某一元素移动时,有时会出现元素越走越快的现象

当我们在用定时器时(setinterval),如果我们不清定时器,它会不停的运转下去。有人会问,我只命名了一个定时器的名字,在重新调用这个定时器名字时,这个定时器应该重新开始啊,其实不是这样的。当我们在启动一个定时器时,电脑会为我们开启一个定时器,当我们再次用同一个名字开启定时器时,电脑会再开另外开启一个定时器,与先前开启的定时器无关,我们所谓的定时器的名字,它只是一个变量而已,并不是定时器的名字,它的功能是清定时器用的,也就是通过clearInterval(变量)使定时器停止运行。代码实例如下:

下面是一个用键盘控制元素head走的一个函数

var timer;

function keyContMove(flag){

//在调用定制器时,首先要清定时器,如果没有这条语句的话,每次按键时都会调用此函数从而另开一个定时器,这样就会使head元素越走越快
clearInterval(timer);
timer=setInterval(function(){
if (flag) {

//speedY是y轴方向的速度,speedX是x轴方向上的速度
top+=speedY;
head.style.top=top+‘px‘;
}else {
left+=speedX;
head.style.left=left+‘px‘;
}

},16)
}

切记程序里的timer是定时器的返回值,不是定时器的名字!!!

时间: 2024-08-25 08:07:18

在JavaScript中,为什么我们在用定时器控制某一元素移动时,有时会出现元素越走越快的现象的相关文章

JavaScript定时器越走越快的问题

目录 JavaScript定时器越走越快的问题 (setinterval)多次初始化 清除(clearInterval)的失效 解决方法 JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearIn

javascript中对象访问自身属性的方式

在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文状态,即添加this关键字.如果没有指定,则上下文默认为window. 举例如下: 1 var obj = 2 { 3 name:"James", 4 showName:function(){ 5 alert(name); 6 } 7 } 通过控制台执行obj.showName() 输出为

JavaScript中splice函数

JavaScript中splice函数方法是从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素. arrayObj.splice( start, deleteCount, [item1[, item2[, . . . [,itemN]]]]) 其中arrayObj必选项.一个 Array 对象. start是必选项.指定从数组中移除元素的开始位置,这个位置是从 0 开始计算的.www.hrbfkyy120.com deleteCount是必选项.要移除的元

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的影响,单单是自己的念想受到了一定得局限,想法不能够像平地而起的高楼大厦建成一样.可是那大楼也是有烂尾的呀,我觉得最重要的还是外在环境与个人观念的先决条件,决定了拖延症的症状的好坏,有那么一些人,它也有拖延症,但是它在拖的中间,想的更多,看的更远.事情在做的时候更加有条不紊,这拖延症这样看来,它也是好

JavaScript中的call、apply

JavaScript中的call.apply call JavaScript中的call是调用一个函数,在调用函数时,将this的值绑定为call参数中的第一个参数. var bye = function(param, param2){ console.log(this); console.log(param); console.log(param2); console.log("bye"); console.log(this.x) } t = {'x': 1}; bye.call(t

javascript中&&和||的区别

javascript中&&和||的区别 &&和||操作符两边不是布尔类型时,系统会转换成布尔类型值再计算(空字符串.null.0都会被转成false),结果本身不变. &&操作符总结:只要一个false就取false的值,都是true取后面,都是false取前面. <script type="text/javascript"> var a = 123 && 234; var b = 0 && 1

JavaScript中的Touch事件简介

在本教程中,我们可以通过检查触摸相关事件以及如何使用它们来检测和响应触摸和滑动事件,从而轻松获得JavaScript.随着基于触摸的设备数量不断增长,掌握这些事件对于理解老龄鼠标事件至关重要.本教程中的示例可以在触摸和非触摸启用的设备中进行应用,而后者则会回退到您信任的鼠标.准备给那些手指做一点锻炼吗?我们走吧! JavaScript触摸事件 所以让我们潜入它.以下列出了JavaScript中支持的触摸事件: JavaScript触摸事件 活动名称 描述 touchstart 当用户与触摸表面接

全面理解JavaScript中的 this

全面理解JavaScript中的 this 上下文 VS 作用域 作用域(scope) 是在运行时代码中的某些特定部分中变量,函数和对象的可访问性.换句话 说,作用域决定了代码区块中变量和其他资源的可见性.而上下文 (context)是用来指定代码某些特定部分中 this 的值. 作用域是基于函数(function-based)的,而上下文是基于对象 (object-based)的.换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调 > 都是独立的.上下文总是被调用函数中关键字 thi

javascript中数组常用的方法和属性

前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属性和方法,在此记录一下. 数组常用的属性和方法 常用属性 Array.length:返回数组的大小 常用方法 Array.pop():删除并返回数组的最后一个元素 Array.push():向数组的结尾添加元素 Array.shift():将元素移除数组 Array.unshift():向数组头部添