在前端开发中，我们常常需要重复执行某个操作，例如定时刷新页面内容、轮播图片等。在 JavaScript 中，可以使用 setTimeout 函数来实现定时执行某个函数的功能。但是，setTimeout 只能执行一次，如果想要重复执行某个函数，就需要使用一些技巧。
使用 setInterval
最简单的方法是使用 setInterval 函数。这个函数接受两个参数：要执行的函数和执行的时间间隔（以毫秒为单位）。例如，下面的代码会每隔 1 秒钟弹出一个提示框：
---------------------- - ---------------- -- ------
但是，setInterval 不是一个完美的解决方案。它有一个明显的缺点，就是无法保证执行时间间隔的准确性。当代码执行时间超过了指定的时间间隔时，就会出现延迟。这种延迟可能会导致一些问题，在某些情况下甚至会崩溃浏览器。
使用递归调用 setTimeout
更加可靠的做法是使用递归调用 setTimeout 函数。这个方法可以确保函数的执行时间准确，并且不会出现延迟。基本思路是在函数内部再次调用 setTimeout 来实现循环执行的效果。例如，下面的代码会每隔 1 秒钟弹出一个提示框：
-------- -------- - ---------------- ------------------ ------ - ------------------ ------
这个版本的代码比使用 setInterval 更加可靠，因为它确保在上一个函数执行完毕之后再次执行。如果函数执行时间超过了指定的时间间隔，它也不会对下一次执行产生影响。
灵活控制循环次数和时间间隔
使用递归调用 setTimeout 可以灵活地控制循环次数和时间间隔。例如，下面的代码会在 5 秒钟内每隔 1 秒钟弹出一个提示框，然后停止执行：
--- ----- - --
-------- -------- -
----------------
--------
-- ------ - -- -
------------------ ------
-
-
------------------ ------这个版本的代码使用了一个变量来统计执行的次数，并且在执行到一定次数之后停止执行。这种方法可以应用于各种场景，例如定时轮播图片、定时请求数据等。
总结
重复执行某个函数是前端开发中常见的需求。使用 setInterval 可以实现简单的循环执行效果，但是存在延迟问题；使用递归调用 setTimeout 可以解决延迟问题，还可以灵活控制循环次数和时间间隔。在实际开发中，应该根据具体的需求选择适当的方法来实现重复执行效果。
示例代码：https://codepen.io/chatgpt/pen/eYzJpOd
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27547