js-day06 定时器

定时器

概念

定时器: 让一段代码等待一段时间或者每隔一段时间就执行一次的代码就是定时器

分类

延迟定时器

延迟: 让一段代码等待一段时间 setTimeout(函数, 时间); 时间单位: ms

等待 只执行一次的效果 使用延迟定时器

效果: 一次性广告 关不掉的广告

/* 
    打开页面 等待3s后 显示img
*/
var img = document.getElementsByTagName('img')[0];
// 等待 只执行一次的效果 使用延迟定时器
setTimeout(auto, 3000);
​
function auto(){
    img.style.display = 'block';
}

间隔定时器

间隔: 每隔一段时间执行一次 setInterval(函数, 时间); 时间单位: ms

每隔 间隔 不间断重复的效果

效果: 计时器 倒计时 轮播图

1s = 1000ms

var n = 0;
// 每隔一秒 让n自加1 输出
// 每隔  间隔  不间断重复的效果
setInterval(function () {
    n++;
    console.log(n);
}, 1000);

清除定时器

定时器一旦开启 不会自动清除 会造成内存泄漏

需要手动清除定时器

间隔: setInterval clearInterval(唯一标识)

延迟: setTimeout clearTimeout(唯一标识)

唯一标识 开启定时器后的返回值就是定时器的唯一标识

接收唯一标识：var 变量 = setTimeout/setInterval();

var n = 5;
var timer = setInterval(function () {
    n--;
    // 如果n等于0  清除定时器
    if(n == 0){
        clearInterval(timer);
    }
    console.log('这是间隔定时器', n);
}, 1000);
console.log(timer, 'timer');

注意

一般封装定时器的时候 是将定时器的函数抽取成普通的函数

当遇到会频繁开启定时器的时候 先清除定时器