js中setTimeout与setInterval

setTimeout和setInterval

javascript都是以单线程的方式运行于浏览器的javascript引擎中的,

setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中

以下方法都是window对象的方法:

setTimeout() 和 clearTimeout()

setInterval() 和 clearInterval()

一、使用时注意作用域

如果需要在对象内部用定时器执行该对象的某一方法时就需要注意了

function Game () {}

Game.prototype = {
	constructor: Game,
	init: function(){
		clock = setInterval(function(){
            this.update();
        }, 500);
	},
	update: function(){
		console.log("test");
	}
}

var game = new Game();
game.init();

上面的写法会出现 Uncaught TypeError: this.update is not a function

原因就在于 setInterval()属于window对象的方法,这里的this指代的是window对象,

而在window对象中又没有定义update方法,因此会报错

function Game () {}

Game.prototype = {
	constructor: Game,
	init: function(){
		var that = this;
		clock = setInterval(function(){
            that.update();
        }, 500);
	},
	update: function(){
		console.log("test");
	}
}

var game = new Game();
game.init();

这样写就没有任何问题了,var that = this;这句话的意思是用that将Game对象保存起来,

再执行that.update()方法就没有任何问题了。

其实下面这样做也是可以的,只是不好传参了

function Game () {}

Game.prototype = {
	constructor: Game,
	init: function(){
		var that = this;
		clock = setInterval(that.update, 500);
	},
	update: function(){
		console.log("test");
	}
}

var game = new Game();
game.init();

另外,使用闭包的方式也是可以的

function Game () {
	function update(){
		console.log("test");
		console.log(this);//window
	}
	setInterval(update, 500);
}

Game();

二、深入解析执行原理

setTimeout(callback, time)会初始化一个计时器,

在指定的时间间隔time毫秒后执行回调函数callback

setInterval(callback, time)也会初始化一个计时器,

但是它是每隔指定的时间间隔time毫秒后就循环执行回调函数callback。

如果需要连续执行某个方法有以下两种方式:

如果不希望连续调用产生互相干扰的状况就用setTimeout()嵌套,

如果希望每隔固定时间精确的执行某个动作就用setInterval()

//1.
setTimeout(function() {
	a();
	setTimeout(arguments.callee, time);
}, time);

//2.
setInterval(function(){
	a();
}, time);

举个例子:

假如执行a()方法需要10s,time等于3s,下面来分析一下两种方式的区别

1.

a()方法执行10s,那么到第一次执行callback中setTimeout的时间也是10s,执行setTimeout

函数,大概的意思就是给浏览器发个消息,“嗨哥们儿,过3s钟我要向代码队列中插入

a()方法的代码咯”,又因为callback中setTimeout方法后面并没有要执行的代码,因此这3秒

cpu其实处于空闲状态,于是再过了3s的便开始插入代码,又因为当前cpu空闲,可以立即执行

a()方法,这时时间已经到了第13s。

因此用这种方式执行一个周期所花的时间为13s

2.

由于time等于3s,按道理来讲,在3s,6s,9s时会有新的a()代码插入到代码队列中,

但是因为js引擎只允许有一份未执行的a()代码,所以真实情况并不是这样

当在前10s,a()方法正在执行期间,实际上只有3s的时候才会有新的a()代码插入

到代码队列,其它的将被忽略掉。当a()方法10s执行完毕,这时3s时插入的a()方法的代码都会开始运行。

代码插入的时间与代码执行时间其实并没有什么关系。

因此用这种方式执行一个周期所花的时间为10s

当然,这里顺便说一句,一个函数执行的时间其实并不是固定的,每次执行时间都会

有些偏差,只是大概稳定在某一个值附近罢了,这与cpu内部运行策略有关,这里扯远了

时间: 2024-10-10 15:39:29

js中setTimeout与setInterval的相关文章

js 中setTimeout和setInterval的使用

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用

js中setTimeout、setInterval、 clearInterval方法简介

setTimeout setTimeout(code, millisec)用于在指定的毫秒数后调用函数或计算表达式. 说明:setTimeout()只执行一次code.如果要多次调用,要使用setInterval()方法或者让 code 自身再次调用 setTimeout() setInterval setInterval(code, millisec) 简介 可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearInterval(

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内

javascript中setTimeout和setinterval的区别是?

setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束.如果运行的代码中再次运行同样的setTimeout命令,则可循环运行. setinterval是循环运行的,即每到设定时间间隔就触发指定代码.这是真正的定时器. serinterval使用简单,而setTimeout则比较灵活,可以随时推出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒...... setTimeout  定义和用法:  setTimeout()方法用于

JS中setTimeout()的使用方法具体解释

1. SetTimeOut()              1.1 SetTimeOut()语法样例              1.2 用SetTimeOut()运行Function              1.3 SetTimeOut()语法样例              1.4 设定条件使SetTimeOut()停止              1.5 计分及秒的counter    2. ClearTimeout()    3.  Set Flag   10.1 setTimeout( )

js中setTimeout()的使用bug

今天用setTimeout()时,遇到一个奇怪的现象,通过多方面的查询,最终解决了问题,这是setTimeout()设计的时候存在的一点点bug. 代码的作用主要是在三秒后自动关闭本浏览器窗口: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style>

js中setTimeout()的使用

setTimeout()在js类中的使用方法   setTimeout (表达式,延时时间)setTimeout(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 1,基本用法:   执行一段代码:   var i=0;   setTimeout("i+=1;alert(i)",1000);   执

js 中 setTimeout()的用法

setTimeout()在js类中的使用方法   setTimeout (表达式,延时时间)setTimeout(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 1,基本用法:   执行一段代码:   var i=0;   setTimeout("i+=1;alert(i)",1000);   执

JS中setTimeout()用法总结

在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事.在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概括,正对setTimeout()做一个详细用法总结. 一.setInterval与setTimeout的区别 setInterval setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位) 语法: setInterval(函数表达式,毫秒数): setInterval