主页

使用场景

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

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)

JavaScript

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《JS-定时器 间歇函数》
评论

qiaofugui

博主很懒,啥都没有
187 文章数
14 评论量
3 分类数
190 页面数
已在风雨中度过 2年77天2小时15分