JavaScript

JavaScript setinterval延迟一秒解决方案

js setinterval延迟一秒解决 js setinterval延迟一秒解决方案

网络 Nanchen_422021-09-13JavaScript3927

这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

当使用setinterval时，发现它刚打开页面时会延迟一秒过后在执行。因为setinterval定时器先执行了自己的一秒钟，执行过后在对里面的内容进行操作，这样就会导致不能立即显示出来

举个例子：先创建一个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();