在前端开发中，我们经常需要使用定时器来控制代码的执行时间，其中 setTimeout 和 setInterval 是最常用的两种定时器函数。在 ES7 中，setTimeout 和 setInterval 的参数有一些变化，本文将详细介绍这些变化，并给出一些实际应用的示例代码。
setTimeout 和 setInterval 的基本用法
setTimeout 和 setInterval 都是 JavaScript 中的全局函数，它们的基本用法如下：
-- ---------- --- --------------------- - ------------------- --------- -- ------ -- ----------- --- ---------------------- - ------------------- --------- -- ------
上面的代码分别使用 setTimeout 和 setInterval 来输出一段文本，它们的参数是一个函数和一个时间间隔，表示在指定的时间间隔后执行指定的函数。其中 setTimeout 只执行一次，而 setInterval 则会一直执行，直到调用 clearInterval 终止。
ES7 中的变化
在 ES7 中，setTimeout 和 setInterval 的参数可以接受一个可选的第三个参数，用来传递给回调函数作为参数。具体来说，第三个参数可以是任何类型的值，包括字符串、数字、对象等等。示例如下：
-- ---------- --- ------------------------- - ------------------- ----------- -- ----- --------- -- ----------- --- -------------------------- - ------------------- ----------- -- ----- ---------
上面的代码在 setTimeout 和 setInterval 的参数列表中分别传入了一个字符串 'world'，它被作为第三个参数传递给回调函数，并在控制台上输出了一段文本。需要注意的是，第三个参数只有在 ES7 中才被支持，在 ES6 及之前的版本中是不被支持的。
实际应用
在实际开发中，我们可以利用 setTimeout 和 setInterval 的第三个参数来传递一些额外的信息，从而实现更加灵活的定时器功能。下面是一些示例代码，演示了如何利用第三个参数实现一些实用的功能。
实现倒计时
下面的代码演示了如何使用 setTimeout 实现一个简单的倒计时功能。倒计时的初始时间和每次递减的时间间隔都可以通过第三个参数传递给回调函数。
-------- --------------- --------- -
--- -- - ------------------- ------ -
------------------
---- -- ---------
-- ----- -- -- -
-- - ---------------- ----------
-
-- ----------
-
--------------- ------ -- -- -- -- -- -- -实现动画效果
下面的代码演示了如何使用 setInterval 实现一个简单的动画效果。动画的每一帧都可以通过第三个参数传递给回调函数。
-------- --------------- --------- -
--- - - --
--- -- - ---------------------- -
-----------------------
- - -- - -- - --------------
-- --------- --------
-
------------- ----- ---- ----- ----- -- -- - - - -实现异步任务的轮询
下面的代码演示了如何使用 setInterval 实现一个简单的轮询功能。在轮询的过程中，每次调用异步任务都可以通过第三个参数传递给回调函数。
-------- --------------- --------- -
--- -- - ---------------------- -
-------------------------- -
--------------------
---
-- --------- -----------
-
-------- ------------------- -
--------------------- -
-----------------
-- ------
-
--------------- ------ -- - - ----- ---------------总结
ES7 中新增的 setTimeout 和 setInterval 的第三个参数为我们提供了更加灵活的定时器功能。通过合理地利用这个参数，我们可以实现一些实用的功能，比如倒计时、动画效果和异步任务的轮询。需要注意的是，第三个参数只有在 ES7 及之后的版本中才被支持，在使用时需要注意兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dde5591886fbafa4b360b4