js之定时器

Posted 2020-08-12

一、通过定时器我们可以间隔设定时间重复调用某个函数，利用这个特性，我们可以做很多事，例如，12306上的每间隔5秒查询自动查询一次余票，简单动画的实现等等

二、定时器的格式：

　　定时器有两种格式，分别是setInterval(func, time) 和 setTimeout(func, time),这两个有一些区别

　　1、setInterval(func, tine);

　　　　（1）、　此定时器操作是这样的，解释到该语句时，是要间隔time时间后第一次执行func函数，间隔time时间后再次执行func函数，重复上述...

　　　　　　来个demo理解一下吧：

　　　　

 var count = 0;
       var print = function () {
           console.log(count++);
       }
    //    每间隔1秒调用一次print函数，所以带引结果应该是从0,1,2...一直打印
        setInterval(print, 5000);

　　　　P.S. 我们在setInterval()中传递函数时，我们一般用个匿名函数包裹一下，然后再匿名函数中执行我们要调用的函数，这样我们可以在匿名函数中进行更多操作，更灵活一些，如下

　　

 　　　　var count = 0;
       var print = function () {
           console.log(count++);
       }
    //    每间隔1秒调用一次print函数，所以带引结果应该是从0,1,2...一直打印
       setInterval(function () {
           print();
       }, 1000);

 

　　　　（2）、如何停止计时器？

　　　　　　setInterval有个返回值，我们获取其返回值后，调用clearInterval(返回值), 即可停止计时器，如下demo

　　　

 　　 var count = 0;
    //    间隔1s打印一次cunt，当count为5时结束定时器，所以打印结果为 0， 1， 2， 3， 4
       var timer = setInterval(function () {
           count === 5? clearInterval(timer) : console.log(count++);
       }, 1000);

　　　

　　　2、setTimeout()

　　　　　　（1）、这个和上边那个定时器用法一样，都是传函数和时间间隔，但运行时操作是不同，这个是间隔设定时间后，调用我们传入的函数，然后就结束了，所以和上边那个区别在于上边那个是多次，而这个只有一次。

　　　　

// 间隔1s后带引setTimeout, 所以打印结果就是setTimeout
       setTimeout(function () {
           console.log(‘setTimeout‘);
       }, 1000);

　　　　　　　（2）、停止计时器，setTimeout()也有返回值，我们获取返回值，然后执行clearTimeout(返回值)，即可停止setTimeout()计时器.

　　　　　　　（3）、利用setTimeout()来模拟setInterval()

　　　　　原理很简单，就是递归，在函数内不断的停止计时器，再添加计时器，达到重复的目的，不多说，直接上demo：

　　

　　　　　　

 

 

 

------------------------------------------------------------------------------------------------------end