異步延遲執行是通過settimeout、promise和async/await三種方式實現的，其中settimeout用于一次性延遲執行代碼，例如settimeout(function() { console.log(“延遲2秒執行”); }, 2000); promise提供結構化異步處理方式，結合settimeout可實現延遲，如function delay(ms) { return new promise(resolve => settimeout(resolve, ms)); }，而async/await基于promise，使異步代碼更易讀，如使用await wait(1000)暫停1秒。settimeout與setinterval的區別在于settimeout僅執行一次，而setinterval周期性執行，需手動清除。取消定時器可通過cleartimeout(timeoutid)或clearinterval(intervalid)實現。promise.then采用鏈式調用處理異步操作，而async/await則通過await關鍵字等待promise resolve，使代碼更同步化且更具可讀性。
異步延遲執行，簡單來說，就是讓一段JavaScript代碼在指定的時間后執行。這在處理用戶交互、動畫效果，或者避免阻塞主線程時非常有用。
setTimeout、Promise和async/await是三種常見的實現方案。
setTimeout
setTimeout是JavaScript內置的函數，用于在指定的毫秒數后執行一個函數。
console.log("開始"); setTimeout(function() { console.log("延遲2秒執行"); }, 2000); console.log("結束");
這段代碼會先輸出“開始”，然后立即輸出“結束”，最后在2秒后輸出“延遲2秒執行”。setTimeout不會阻塞后續代碼的執行。
Promise
Promise提供了一種更結構化的方式來處理異步操作。結合setTimeout，可以實現延遲執行。
function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function myFunction() { console.log("開始"); await delay(2000); console.log("延遲2秒執行"); console.log("結束"); } myFunction();
這里，delay函數返回一個Promise，它在指定的毫秒數后resolve。async/await使得代碼看起來更像同步代碼，但實際上它是異步執行的。
async/await
async/await是建立在Promise之上的語法糖，讓異步代碼更易于閱讀和編寫。
function wait(ms) { return new Promise(resolve => { setTimeout(resolve, ms); }); } async function execute() { console.log("開始執行"); await wait(1000); // 暫停1秒 console.log("1秒后執行"); await wait(2000); // 暫停2秒 console.log("3秒后執行"); } execute();
這段代碼利用async函數和await關鍵字，使得代碼在wait函數返回的Promise resolve后才會繼續執行。這使得異步代碼的流程控制更加清晰。
setTimeout和setInterval的區別是什么？
setTimeout只執行一次延遲操作，而setInterval會按照指定的時間間隔重復執行。
// setTimeout示例 setTimeout(function() { console.log("只執行一次"); }, 1000); // setInterval示例 let intervalId = setInterval(function() { console.log("每秒執行一次"); }, 1000); // 停止setInterval setTimeout(function() { clearInterval(intervalId); console.log("停止setInterval"); }, 5000); // 5秒后停止
setTimeout適合用于只需要延遲執行一次的場景，而setInterval適合用于需要周期性執行的場景。注意在使用setInterval時，需要手動清除定時器，否則會一直執行下去。
如何取消setTimeout或setInterval？
可以使用clearTimeout和clearInterval函數來取消定時器。
let timeoutId = setTimeout(function() { console.log("這段代碼可能不會執行"); }, 2000); clearTimeout(timeoutId); // 取消setTimeout let intervalId = setInterval(function() { console.log("這段代碼也不會執行"); }, 1000); clearInterval(intervalId); // 取消setInterval
如果在定時器執行之前調用了clearTimeout或clearInterval，那么定時器就不會執行。這在某些需要動態控制定時器的場景下非常有用。例如，用戶在輸入過程中，可以先取消之前的定時器，然后再重新設置一個新的定時器，以避免頻繁觸發操作。
Promise.then和async/await有什么區別？
雖然Promise.then和async/await都可以用于處理異步操作，但它們在代碼風格和可讀性上有所不同。async/await通常被認為更易于閱讀和編寫，因為它使得異步代碼看起來更像同步代碼。
// Promise.then示例 function getData() { return new Promise(resolve => { setTimeout(() => { resolve("數據已加載"); }, 1000); }); } getData() .then(data => { console.log(data); return "處理后的數據"; }) .then(processedData => { console.log(processedData); }); // async/await示例 async function fetchData() { let data = await getData(); console.log(data); let processedData = "處理后的數據"; console.log(processedData); } fetchData();
Promise.then需要使用鏈式調用來處理異步操作，而async/await可以使用await關鍵字來等待Promise resolve，使得代碼更具可讀性。async/await實際上是Promise的語法糖，底層仍然使用Promise來實現異步操作。選擇哪種方式取決于個人偏好和項目需求。
