JS-定时器 间歇函数

使用场景

• 每隔一段时间需要自动执行一段代码，不需要手动触发，例如倒计时
• 定时器函数有两种

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
setTimeout() ：在指定的毫秒数后调用函数或计算表达式

开启定时器

setInterval(函数, 间隔时间)
每隔一段时间调用这个函数
间隔时间单位是毫秒

function repeat() {
    console.log('重复');
}
setInterval(repeat, 1000);

函数名不需要加括号（加了括号就是立即执行），定时器返回的是一个id数字

关闭定时器

let 变量名 = setIneterval(函数, 间隔时间)
clearInterval(变量名)

一般不会刚创建就停止，而是会满足一定条件再停止

用户阅读倒计时案例

// 获取元素
let btn = document.querySelector('.btn');
// 用来计数的变量
let i = 60;
// 开启定时器 间歇函数 time定时器的序号id
let time = setInterval(function () {
    i--;
    btn.innerHTML = `我已经阅读用户协议(${i})`;
    if (i === 0) {
        // 清除定时器
        clearInterval(time);
        // 开启按钮
        btn.disabled = false;
        // 更换文字
        btn.innerHTML = '我同意用户协议';
    }

焦点图案例

// 获取元素 图片和h3
let pic = document.querySelecror('.pic');
let text = document.querySelecror('.text');
// 记录图片张数
let i = 0;
// 开启定时器
setInterval(function (){
    i++;
    // 修改图片src属性
    pic.src = data[i].imgSrc;
    // 修改图片alt属性
    pic.alt = data[i].title;
    // 修改文字内容
    text.innerHTML = data[i].title;
    // 无缝衔接
    if (i === data.length - 1) {
        i = -1;
    }
    // i === data[i].length - 1 ? i = -1 : i;
}, 1000)