javascript定时器详解

时间:2022-04-07 23:35:02

JS定时器

定时器是javascript的重点部分,在以后的很多实战项目里都会用到。

在javascript中,与定时器有关的方法是:

setInterval、clearInterval

以及

setTimeout、clearTimeout

这些方法都是定义在window对象上面的,因此我们写window.setInterval和解setInterval的意思是一样的,前面的window可以省略掉。

setInterval这个定时器的功能是每过一段时间,就把我们想要执行的函数放到js的执行队列中等待执行。因为执行队列不一定是空的,需要等执行队列中的所有任务都执行完之后才会执行我们的函数,因此这个函数执行的时间也会有细微的差别。

这个方法的语法是:

window.setInterval(function () {}, 1000);

第一个参数是我们要执行的函数,第二个参数是每过多长时间把函数放入执行队列。

这里要说明的是,第一个参数的那个函数,不能带有参数。其次,里面的this默认指向window,因为前面提到过,谁调用方法,方法里面的this就指向谁,setInterval其实前面省略了window,因此里面的this默认一定指向window,不论这个setInterval是否是一个对象的方法。

setInterval其实很消耗内存,这个定时器一旦执行,就不会终止,因此需要我们的内核一直监听这个函数。

这个时候我们就需要一个方法来清除定时器了:clearInterval。

定时器其实会返回一个标记,我们可以通过定时器的这个标记来清除掉相对应的定时器。



1 var i = 0;
2   var timer = setInterval(function () {
3         i++;
4         if(i === 10) {
5               clearInterval(timer);
6         }
7   }, 100);

 

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

实际上,如果我们打印这个timer来看的话,它就是一个数字1,我们再开一个定时器,返回的就是2,也就是说,这个标记就是定时器的序号数,我们直接clearInterval(1);其实也可以清除掉第一个定时器,不过这里还是用标记来清除较好。

因此这里有一点需要特别强调:凡是写定时器,一定要清除定时器!

好像有一次没清除,电脑卡爆了!

还有一点需要注意的是,定时器是先等待再执行。

有时候我们只需要这个函数延迟一段时间执行,并不需要专门开启一个定时器,这个时候就需要用到setTimeout了。

setTimeout是延迟执行的意思,语法和用法和setInterval一样,只是这个方法只是把函数延迟一段时间之后执行一次而已。

同时它也有clearTimeout,当我们不想让这个函数执行了,提前把它clear掉就可以了。

其实setInterval和setTimeout的第一个参数不一定非要是一个函数,它也可以是一串字符型的js代码。


 1 setInterval(“console.log(1);”, 100);  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这段代码同样可以执行,定时器每100ms给我们打印一个1。

通过这个特性,我们不一定要把函数写在定时器里面,大部分时间我们都是在外部把函数定义好了,然后直接把函数名传进去就可以了。


 1 function test () {} 2 setInterval(test, 1000);   
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

那么这一次的知识点就这么多哟~