JavaScript setInterval 初始延迟一秒的解决方案
作者:拾光时间:2026-10-24 15:38:58浏览:137
本文分析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);
运行效果如下图所示:

可以看到,页面会先等待那一秒钟过去,然后才执行并显示内部的内容。
解决初始延迟的方法
针对这一现象,可以采取以下解决办法:
在启动定时器的同时,直接调用一次该函数。
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();

到此这篇关于JavaScript setinterval延迟一秒解决方案的文章就介绍到这了,更多相关JavaScript setinterval延迟一秒解决内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
