JavaScript setinterval延遲一秒解決方案

更新時(shí)間：2021年09月13日 15:12:40 作者：Nanchen_42

這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

當(dāng)使用setinterval時(shí)，發(fā)現(xiàn)它剛打開(kāi)頁(yè)面時(shí)會(huì)延遲一秒過(guò)后在執(zhí)行。因?yàn)閟etinterval定時(shí)器先執(zhí)行了自己的一秒鐘，執(zhí)行過(guò)后在對(duì)里面的內(nèi)容進(jìn)行操作，這樣就會(huì)導(dǎo)致不能立即顯示出來(lái)

舉個(gè)例子：先創(chuàng)建一個(gè)div盒子，然后寫(xiě)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);

效果如圖：

它的會(huì)先執(zhí)行那一秒鐘，等一秒鐘過(guò)了然后再執(zhí)行里面顯示的內(nèi)容

解決辦法：

直接調(diào)用

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();

到此這篇關(guān)于JavaScript setinterval延遲一秒解決方案的文章就介紹到這了,更多相關(guān)JavaScript setinterval延遲一秒解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript 高級(jí)語(yǔ)法介紹
前幾天一個(gè)同事問(wèn)我如下的JavaScript代碼如何理解
2009-06-06
js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組元素遍歷與頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
layui radio單選限制下一個(gè)radio單選的實(shí)例
今天小編就為大家分享一篇layui radio單選限制下一個(gè)radio單選的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JavaScript?跳出iframe框架示例詳解
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-11-11
JavaScript返回上一頁(yè)的三種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript返回上一頁(yè)的三種方法及區(qū)別介紹,本文直接給出示例代碼,需要的朋友可以參考下
2015-07-07
小程序server請(qǐng)求微信服務(wù)器超時(shí)的解決方法
這篇文章主要介紹了小程序server請(qǐng)求微信服務(wù)器超時(shí)的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
詳解 javascript對(duì)象創(chuàng)建模式
這篇文章主要介紹了詳解 javascript對(duì)象創(chuàng)建模式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript的相關(guān)知識(shí)。感興趣的朋友可以了解下
2020-10-10
vue中npm包全局安裝和局部安裝過(guò)程
這篇文章主要介紹了npm包全局安裝和局部安裝過(guò)程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
javascript代碼在ie8里報(bào)錯(cuò) document.getElementById(...) 為空或不是對(duì)象的解決方
今天更升級(jí)了ie8,發(fā)現(xiàn)原來(lái)在ie7下可以運(yùn)行的代碼，不能運(yùn)行了，發(fā)現(xiàn)了一些細(xì)節(jié)，附臨時(shí)修改辦法。
2009-11-11
微信小程序?qū)嵺`之動(dòng)態(tài)控制組件的顯示/隱藏功能
這篇文章主要介紹了微信小程序?qū)嵺`之動(dòng)態(tài)控制組件的顯示/隱藏功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07