首页 > 代码库 > 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之定时器