js定时器

js中的定时器

js 定时器有以下两个方法：

• setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。可以叫做周期性定时器
• setTimeout() ：在指定的毫秒数后调用函数或计算表达式。可以叫做一次性定时器

定时器语法

参数一：可以是函数不带参数, 或者是字符串
参数二： 定时的时间

setTimeout (test,1000)； //1秒后执行
字符串，可以执行的代码
setTimeout (‘test()’,1000)； //1秒后执行
匿名函数
setTimeout (function(){},1000)； //1秒后执行
注：setInterval的用法与setTimeout一样
定时器的返回值是一个唯一的ID

var timer = setTimeout(function(){
			console.log("holle word");
		}, 1000)
console.log(timer);
var timer1 = setTimeout(function(){
			console.log("holle word");
		}, 1000)
console.log(timer1);

1和2 就是定时器的返回的ID
同查上图也发现了定时器内部函数输出比全局中的输出要晚。造成这样是原因主要是 异步事件 setTimeout到时后会把回调函数放入消息队列中Event Queue，主线程的宏任务执行完毕后依次执行消息队列的微任务，等微任务执行完了在循环回来执行宏任务

clearTimeout(需要停止的对象)
clearInterval(需要停止的对象)

定时器的使用

setTimeout()

比如：、

var date = new Date().getTime();
			var timer = setTimeout(function(){
					var date1 = new Date().getTime();
						console.log(date1- date)
						console.log("holle word");
					}, 1000)

会在1秒后执行console.log(“holle word”); 并且只执行一次

看上面的图会发现实际的执行时间不是1000毫秒 看看setInterval() 是否也有相同的情况

setInterval()

比如：、

var date = new Date().getTime();
			var timer = setInterval(function(){
					var date1 = new Date().getTime();
						console.log(date1- date)
						console.log("holle word");
						date = date1;
					}, 1000)

造成这一问题的主要原因是js的机制问题
上面也说过 异步事件 setInterval 到时后会把回调函数放入消息队列中Event Queue，主线程的宏任务执行完毕后依次执行消息队列的微任务，等微任务执行完了在循环回来执行宏任务。但是由于消息队列中存在大量任务，其他任务执行时间就会造成定时器回调函数的延迟

定时器中this的指向

var name = ‘my name is window’;
var obj = {
name: ‘my name is obj’,
fn: function () {
// var that = this; 可以在此处定义一个this，改变this指向
setTimeout(function () {
console.log(this.name); // 定时器中this默认指向window
console.log(that.name) //j
}, 1000)
// 也可以使用箭头函数改变this指向
// setTimeout(()=> {
// console.log(this.name); //my name is obj
// }, 1000)
}
}
obj.fn()
在setTimeout内部，this绑定采用默认绑定规则，也就是说，在非严格模式下，this会指向window；而在严格模式下，this指向undefined