定时器-间歇函数的特性及应用

特性:

每隔一段时间会自动执行一段代码，不需要手动触发

语法：

开启定时器

let timeId = setInterval(函数,间隔时间(以ms为单位))//定时器返回的是一个id数字，一般用句柄来承接，通常命名为timeId

清除定时器

clearInterval(句柄) 

应用场景：倒计时，轮播图等

案例：倒计时

 <button>倒计时</button>

 // 获取按钮的值
        let btn = document.querySelector('button')
            // 给按钮设置单击事件
        btn.addEventListener('click', function() {
            // 设置倒计时的总时长
            let timeCount = 5
                // 开启定时器,为定时器添加句柄
            let timeId = setInterval(function() {
                // 开启定时器时button按钮禁选
                btn.disabled = true
                    // 总时长自减
                timeCount--
                // 显示倒计时
                btn.innerText = `倒计时${timeCount}s`
                    // 清除条件
                if (timeCount == -1) {
                    // 清除定时器
                    clearInterval(timeId)
                        // 清除完定时器后解除button按钮的禁选状态
                    btn.disabled = false
                        // 清除完定时器后将button的值倒计时-1s重新赋值为倒计时
                    btn.innerText = '倒计时'
                }

            }, 1000)

        })

总结：定时器函数可以根据时间自动重复执行某些代码。

开启定时器后会根据定时器的间隔时间一直重复执行相关代码，直到遇到停止条件清除定时器后才不会继续执行相关代码。