JavaScript setInterval 初始延迟一秒的解决方案

作者：拾光

时间：2026-10-24

本文分析JavaScript中setInterval定时器在页面加载后首次执行存在一秒延迟的原因，并通过立即调用回调函数的方法解决该问题，确保逻辑在定时器启动前即可执行。

文章目录

setInterval 初始延迟问题分析

在使用 setInterval 时，可能会发现页面刚打开时会出现一秒的延迟才开始执行逻辑。这是因为 setInterval 机制会先等待设定的时间间隔（如1000毫秒）结束后，才执行内部的回调函数，从而导致内容无法立即显示。

为了说明这个问题，我们先创建一个 div 元素，并在 script 中编写相关的定时器代码。


var div = document.querySelector('div');
			var num = 10;
			setInterval(function(){
				if(num==1){
					div.innerHTML = null;
					return fn1;
				}else{
					num--;
					div.innerHTML = '还剩'+num+'秒';
				}
			},1000);

运行效果如下图所示：

setInterval 初始延迟问题分析

可以看到，页面会先等待那一秒钟过去，然后才执行并显示内部的内容。

解决初始延迟的方法

针对这一现象，可以采取以下解决办法：

在启动定时器的同时，直接调用一次该函数。


var div = document.querySelector('div');
			var num = 11;
			function fn1(){
				if(num==1){
					div.innerHTML = null;
					return fn1;
				}else{
					num--;
					div.innerHTML = '还剩'+num+'秒';
				}
			}
			setInterval(fn1,1000);
			fn1();

setInterval 初始延迟问题分析