一、setTimeout函數(shù)的基本使用
setTimeout是JS中很常用的延遲1秒的函數(shù)。其基本語(yǔ)法為:
setTimeout(function(){
//執(zhí)行代碼
}, 1000);
其中,第一個(gè)參數(shù)為回調(diào)函數(shù),第二個(gè)參數(shù)為延遲時(shí)間,單位是毫秒。以上示例中,需等待1秒后才會(huì)執(zhí)行回調(diào)函數(shù)中的代碼。
需要注意的是,延遲時(shí)間并不是確定的時(shí)間,而是一個(gè)范圍。因?yàn)镴S是單線程的語(yǔ)言,setTimeout函數(shù)會(huì)把回調(diào)函數(shù)放入異步隊(duì)列中,等待主線程完成當(dāng)前任務(wù)后才會(huì)執(zhí)行。若當(dāng)前任務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng),異步隊(duì)列中的回調(diào)函數(shù)就會(huì)延遲執(zhí)行。
二、多次setTimeout的調(diào)用
當(dāng)需要延遲執(zhí)行一系列代碼時(shí),可以使用多次setTimeout函數(shù)。示例代碼如下:
setTimeout(function(){
//執(zhí)行代碼1
setTimeout(function(){
//執(zhí)行代碼2
setTimeout(function(){
//執(zhí)行代碼3
}, 1000);
}, 1000);
}, 1000);
以上示例中,需要等待1秒后執(zhí)行代碼1,再等待1秒后執(zhí)行代碼2,最后再等待1秒后執(zhí)行代碼3。
使用多次setTimeout的好處是可以讓代碼更加具有可讀性,容易理解。但缺點(diǎn)是代碼嵌套深度較大,可讀性較差,難以維護(hù)。
三、Promise與async/await的使用
Promise是ES6中新增的一種異步編程解決方案。其可以簡(jiǎn)化異步代碼的編寫(xiě),使其更加易讀。示例代碼如下:
function delay(){
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve();
}, 1000);
});
}
async function doSomething(){
await delay(); //等待1秒后執(zhí)行下面代碼
//執(zhí)行代碼
}
doSomething();
以上示例中,使用Promise封裝延遲函數(shù),并通過(guò)async/await語(yǔ)法糖使代碼更加簡(jiǎn)潔易讀。
四、jQuery的.delay()方法
jQuery是JS中廣泛使用的庫(kù)之一,其提供了豐富的工具函數(shù),其中就包括延遲執(zhí)行函數(shù)的方法——.delay()。示例代碼如下:
$("#element").fadeIn().delay(1000).fadeOut();
以上示例中,使用.delay(1000)實(shí)現(xiàn)了1秒的延遲。
需要注意的是,.delay()方法只適用于jQuery的動(dòng)畫(huà)效果,無(wú)法使用在一般的JS代碼中。
五、總結(jié)
以上就是JS延遲1秒的幾種常見(jiàn)方法,包括setTimeout函數(shù)的基本使用、多次setTimeout的調(diào)用、Promise與async/await的使用,以及jQuery庫(kù)提供的.delay()方法。需要根據(jù)具體情況選擇合適的延遲函數(shù),并理解其中的異步原理和執(zhí)行順序。