在前端开发中，我们常常使用 setInterval 函数来定时执行某些操作。但是，在实际应用中，我们会发现第一次调用函数并没有延迟，而是立即执行了。这是为什么呢？这篇文章将深入探讨这个问题，并给出解决方案。
问题原因
在 JavaScript 中，setInterval 函数的第一个参数是要执行的代码块，第二个参数是时间间隔（以毫秒为单位）。当执行 setInterval 函数时，会设置一个计时器，每经过指定的时间间隔就会执行一次代码块。
然而，由于 JavaScript 是基于事件循环的单线程语言，浏览器执行 JavaScript 代码时会先处理完当前任务再去处理下一个任务。因此，如果第一个任务执行时间较长，那么第二个任务就需要等待很长时间才能开始执行。这也就是为什么第一次调用 setInterval 函数会立即执行的原因：因为第一个任务的执行时间已经占用了整个时间间隔，所以第二个任务只能在第一个任务执行完后才开始执行。
解决方案
解决这个问题的方法有很多种，下面介绍两种比较常见的方法。
方法一：使用 setTimeout 函数
我们可以先执行一次代码块，然后再按照指定的时间间隔执行。具体实现方式是在 setInterval 函数内部使用 setTimeout 函数来延迟第一次执行。
-- -------------------- ---- ------- -------- ------------------- ------ - ----- -- ----- ------ --------------- ------- - -- ---- -------------------------- - ------------------- --------- -- ------
方法二：手动控制延迟时间
另一种方法是手动控制延迟时间。我们可以通过记录上一次执行的时间，然后根据时间间隔计算出下一次执行的时间，从而实现延迟第一次执行。
-- -------------------- ---- -------
-------- ------------------- ------ -
--- ---- - -----------
------ ---------------------- -
--- --- - -----------
-- ---- - ---- -- ------ -
-----
---- - ----
-
-- -------
-
-- ----
-------------------------- -
------------------- ---------
-- ------总结
本文讨论了在执行 setInterval 函数时没有延迟第一次执行的原因，并介绍了两种解决方案。使用 setTimeout 函数或者手动控制延迟时间都可以解决这个问题。在实际开发中，根据具体情况选择合适的方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9054
