JS定时器详解

前端定时器详解

一、简介

JS是单线程,同一时间只能执行一个任务,其他任务就得排队,后续任务必须等到前一个任务结束才能开始执行。而有时候我们需要规定时间内做一件事,比如倒计时、页面轮播图等;这个时候就需要用到JS定时器。

当我们定义了一个定时器后,定时器会进入浏览器的定时器触发线程去排队,时间到了之后再转回到JS执行线程中排队。下面就介绍JS的几种定时器:

二、定时器

2.1 setTimeout(fn,time,lang)

在规定时间内执行一次,是一次性的。

  • fn是时间到了要执行的js代码串;
  • time执行代码钱需要等待的毫秒数;
  • lang可选,设置脚本语言JScript | VBScript | JavaScript(历史遗留问题可忽略此参数)

每次执行定时器函数会返回一个id,用于清除定时器:clearTimeout(timerId)

示例:

var timerId = setTimeout(function () {
    console.log("1秒钟到了");
    clearTimeout(timerId);
}, 1000);
2.2 setInterval(fn,time,lang)

在规定时间内执行,是周期性的。

  • fn是时间到了要执行的js代码串;
  • time执行代码钱需要等待的毫秒数;
  • lang可选,设置脚本语言JScript | VBScript | JavaScript(历史遗留问题可忽略此参数)

每次执行定时器函数会返回一个id,用于清除定时器:clearInterval(timerId)。只有清除这个定时器之后才会停止定时,否则便会一直执行。

示例:

var index = 0;
var timerId = setInterval(function () {
    console.log(++index + "秒钟到了");
    if(index === 10) {
       clearInterval(timerId); // 十秒的时候结束运行
    }
}, 1000);
2.3 requestAnimationFrame(fn)

触发间隔跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。默认只会执行一次,只需要传递fn执行代码串。清除定时器:cancelAnimationFrame(timerId)

这个是HTML5新增的特性,可以利用这个来做无限循环的动画,相比较setTimeout、setInterval的优势在于:

  • 它会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,提升性能;
  • 在隐藏或不可见的元素中,它不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
requestAnimationFrame(function() {
	console.log("屏幕刷新了!");
});

注意:requestAnimationFrame是新增的属性需要考虑兼容性,无法设置规定时间平常使用较少。

三、封装定时器类

在平常项目中很多地方都会用到这个定时功能,但是不能很好的清除对应定时器,导致事件不听调用,影响性能。当定义一个工具类后便可以轻松的创建一个定时任务,关闭时也不用担心定时id无法获取的问题。

class MyTimer {
	constructor() {
		this.timerId = undefined;
	}
	timeout(fn, time) {
		if(this.timerId) {
			clearTimeout(this.timerId)
		}
		setTimeout(fn, time);
		setInterval()
	}
	interval(fn, time) {
		if(this.timerId) {
			clearInterval(this.timerId)
		}
		setInterval(fn, time);
	}

}

这里就是简单封装了一下,保证new的一个定时器都有唯一的一个id值;具体的封装需要根据业务场景来决定。

四、总结

  • 主要定时器误差问题,受事件循环机制影响;

  • 根据不同需求选择对应定时器;

  • 用变量保存定时器返回的id(清除时用到);

  • 使用定时器时一定要先清除之前的定时器,避免定时器叠加;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值