JS-定时器 间歇函数

5次阅读
没有评论

共计 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)

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计937字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码