WebAPI-window对象的两个定时器

╰半夏微凉° 2023-06-18 14:58 11阅读 0赞

## window 对象的两个定时器 ##

##### setTimeout() #####

`setTimeout(function|code, milliseconds, param1, param2, ...)` 在指定的毫秒数后会调用函数或计算表达式，只会调用一次；返回值为定时器 ID（数字类型）。

参数：

*  `function|code` 定时器调用的回调函数（可以是匿名函数也可以是命名函数的函数名）或JS代码串（如果JS代码串是函数名则需要加小括号调用，例如：`'fun()'`；这种方式不推荐使用）
 *  `milliseconds` 毫秒值，省略该参数时默认值为 0
 *  `param1, param2, ...` 用于传给回调函数的参数（IE9 以上才支持该参数）

示例：

// 1000 毫秒后会弹出一个警告框
    setTimeout(function() { 
    	alert('执行了回调函数！')
    }, 1000)

![在这里插入图片描述][2019112511053078.gif]

##### setInterval() #####

`setInterval(function|code, milliseconds, param1, param2, ...)` 按照指定的周期（时间以毫秒计）不停的来调用函数或计算表达式，直到使用 `clearInterval()` 清除了定时器或关闭了浏览器窗口；返回值为定时器 ID。

参数同 `setTimeout()`

示例：

function kuang() { 
    	console.log('打印！')
    }
    // 每隔 1000 毫秒就会在控制台打印信息
    setInterval(kuang, 1000)

![在这里插入图片描述][20191125113234754.gif]  
补充：使用 `setTimeout()` 和 `setInterval()` 时可以省略 `window` 前缀。

## 清除定时器的两种方法 ##

##### clearTimeout() #####

`clearTimeout(timeoutID)` 用于清除通过 setTimeout() 创建的定时器

*  `timeoutID` 由 setTimeout() 返回的 ID 值，必要的参数

<button id="btn">停止</button>
    <script> var btn = document.querySelector('#btn') // 添加点击事件 btn.addEventListener('click', function() { // 清除定时器 clearTimeout(timer) }) // 用来存储定时器 id var timer = null function show() { // 存储定时器 id timer = setTimeout(function() { console.log('打印！') // 调用 show 函数 show() }, 1000) } // 调用 show 函数 show() </script>

![在这里插入图片描述][20191203105431886.gif]

##### clearInterval() #####

`clearInterval(intervalID)` 方法可清除 setInterval() 方法创建的定时器

*  `intervalID` 由 setInterval() 返回的 ID 值，必要的参数

[2019112511053078.gif]: https://img-blog.csdnimg.cn/2019112511053078.gif
[20191125113234754.gif]: https://img-blog.csdnimg.cn/20191125113234754.gif
[20191203105431886.gif]: https://img-blog.csdnimg.cn/20191203105431886.gif