JS-定时器 间歇函数

共计 937 个字符，预计需要花费 3 分钟才能阅读完成。

使用场景

• 每隔一段时间需要自动执行一段代码，不需要手动触发，例如倒计时
• 定时器函数有两种
  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)