首页 > 代码库 > js之定时器

js之定时器

一、通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,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

 

    

js之定时器