javascript定时器详解

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; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

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