JS中的计时器

JS中的计时器

 
JS计时器中this指针指向window

var timer = setTimeout(function () {
            console.log(this);
        }, 1000)

1.循环计时器

setInterval（function，time，value）

function	函数名
time	多长时间执行一次
value	传入参数

 

1.1创建计时器

可以不用变量接收

方法一

var timer = setInterval(function () {
            var time = new Date()
            console.log(time);
        }, 1000)

方法二

var timer = function () {
            var time = new Date()
            console.log(time);
        }
setInterval(timer, 1000)

1.2 清除计时器

var count = 0		//执行的次数
        var timer = setInterval(function () {
            count++
            //下面是终止计时器的条件
            if (count >= 5) {
                clearInterval(timer)
            }
            console.log(count);
        }, 1000)

1.3 计时器传参

for (var i = 0; i < 5; i++) {
            var timer = setInterval(function (args) {
                console.log(args);
            }, 1000, i)
        }

2.一次性计时器

2.1 创建计时器

和循环计时器一样

方法1

var time = function () {
            console.log(1);
        }
        var timer = setTimeout(time, 1000)

方法2

setTimeout(function () {
            console.log(1);
        }, 1000)

2.2 清除计时器

var count = 0
        var time = setTimeout(function () {
            count++
            console.log(count);
            if (count = 0) {
                clearTimeout(time)
            }
        }, 1000)

2.3 计时器传参

for (var i = 0; i < 5; i++) {
            var time = setTimeout(function (args) {
                console.log(args);
            }, 1000, i)
        }

2.4 一次性计时器转换成循环计时器

var time = function () {
            console.log("循环");
            setTimeout(time, 1000)
        }
        time()

清除

var count = 0
        var time = function () {
            count++
            console.log(count);
            if (count > 3) {
                clearTimeout(timer)
                return
            }
            var timer = setTimeout(time, 1000)
        }
        time()

3.第三个计时器

没有设置时间，根据电脑的刷新频率走（16ms 60hz）类似于一次性计时器，切出浏览器默认暂停

//兼容性处理
var requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (time) {
                setTimeout(time, 1000 / 60)
            }
        var cancelFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame ||
            function (time) {
                clearTimeout(time)
            }
        var count = 0
        op()
        function op() {
            count++
            console.log(count);
            if (count >= 10) {
                cancelFrame(timer)
                return
            }
            timer = requestFrame(op)
        }