在开发前端应用中，我们经常需要使用 JavaScript 的 setInterval() 函数来实现定时调用某个函数或者代码块，比如轮播图、计时器等等。然而，在某些情况下，我们可能需要让 setInterval() 函数只触发指定次数，比如在一个动画结束后停止调用该函数。
那么，该如何让 setInterval() 函数只触发指定次数呢？接下来，我们将会深入探讨这个问题并提供解决方案。
方案一：使用计数器
最简单的做法是使用计数器来跟踪 setInterval() 调用的次数，当达到指定次数后，清除计时器即可。下面是一个示例代码：
-- -------------------- ---- -------
--- ----- - --
----- ---------- - -------------- -- -
------------------ --------
--------
-- ------ --- -- -
--------------------------
-
-- ------上述代码中，我们定义了一个变量 count 来记录 setInterval() 函数的调用次数，并且每次调用该函数时都会增加这个计数器。当计数器达到设定的值时，我们使用 clearInterval() 函数来清除计时器。
方案二：使用递归
除了使用计数器外，我们还可以使用递归来实现让 setInterval() 函数只触发指定次数的效果，示例代码如下：
-- -------------------- ---- -------
--- ----- - --
-------- ------------- -
------------------ --------
--------
-- ------ - -- -
----------------------- ------
-
-
----------------------- ------在上述代码中，我们定义了一个函数 doSomething() 来代替 setInterval() 调用，每次递归调用这个函数时都会增加计数器 count，当计数器达到设定值时，递归停止。
需要注意的是，在使用递归时，我们需要使用 setTimeout() 函数来模拟 setInterval() 的效果，并且需要在第一次调用 setTimeout() 时执行第一次定时任务。
改进方案：封装函数
以上两种方案均可实现让 setInterval() 函数只触发指定次数的效果，但是它们都需要在代码中显式地管理计数器或使用递归调用。为了提高代码的可读性和维护性，我们可以将其封装成一个函数，示例代码如下：
-- -------------------- ---- -------
-------- ------------------------ ------ ------ -
--- ----- - --
----- ---------- - -------------- -- -
-----------
--------
-- ------ --- ------ -
--------------------------
-
-- -------
-
----------------- -- -
------------------ --------
-- ----- ---在上述代码中，我们定义了一个名为 runSetInterval() 的函数来代替原生的 setInterval() 函数，使其可以传入回调函数、延迟时间和执行次数等参数。该函数内部使用计数器来管理调用次数，并且当调用次数达到指定值时，清除计时器。
使用封装后的函数，我们可以更加方便地使用 setInterval() 并控制它的触发次数，提高了代码的可读性和可维护性。
总结
本文介绍了两种实现让 setInterval() 只触发指定次数的方法以及一种改进方案。其中，使用计数器和递归调用是最基本的解决方法，但需要显式地管理计数器和递归停止条件。封
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26143