JavaScript setinterval延遲一秒解決方案
更新時間：2021年09月13日 15:12:40 作者：Nanchen_42
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
當使用setinterval時，發(fā)現(xiàn)它剛打開頁面時會延遲一秒過后在執(zhí)行。因為setinterval定時器先執(zhí)行了自己的一秒鐘，執(zhí)行過后在對里面的內(nèi)容進行操作，這樣就會導致不能立即顯示出來
舉個例子：先創(chuàng)建一個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);
效果如圖：
它的會先執(zhí)行那一秒鐘，等一秒鐘過了然后再執(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript中常用的數(shù)組操作方法
- 深入淺出探究JavaScript中的async與await
- JavaScript實現(xiàn)經(jīng)典貪吃蛇游戲
- Javascript基礎(chǔ)知識中關(guān)于內(nèi)置對象的知識
- JavaScript 運行機制詳解再淺談Event Loop
- Python 協(xié)程與 JavaScript 協(xié)程的對比
- javascript實現(xiàn)鼠標拖尾特效
- JavaScript實現(xiàn)簡單拖拽效果
- JavaScript 數(shù)組去重詳解
- JavaScript實現(xiàn)飛機大戰(zhàn)游戲
- JavaScript 上傳文件限制參數(shù)案例詳解
- 簡單談談JavaScript變量提升
- 深入理解JavaScript的事件執(zhí)行機制
- 8個工程必備的JavaScript代碼片段
相關(guān)文章
前幾天一個同事問我如下的JavaScript代碼如何理解2009-06-06
這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結(jié)合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
今天小編就為大家分享一篇layui radio單選限制下一個radio單選的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-11-11
這篇文章主要介紹了JavaScript返回上一頁的三種方法及區(qū)別介紹,本文直接給出示例代碼,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了小程序server請求微信服務器超時的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了詳解 javascript對象創(chuàng)建模式的相關(guān)資料，幫助大家更好的理解和學習JavaScript的相關(guān)知識。感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了npm包全局安裝和局部安裝過程，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
javascript代碼在ie8里報錯 document.getElementById(...) 為空或不是對象的解決方
今天更升級了ie8,發(fā)現(xiàn)原來在ie7下可以運行的代碼，不能運行了，發(fā)現(xiàn)了一些細節(jié)，附臨時修改辦法。2009-11-11
微信小程序?qū)嵺`之動態(tài)控制組件的顯示/隱藏功能
這篇文章主要介紹了微信小程序?qū)嵺`之動態(tài)控制組件的顯示/隱藏功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07