在JavaScript代碼中，避免阻塞主要涉及到異步編程。以下是一些常用的方法來避免阻塞：
使用回調函數（Callback）： 回調函數是一種傳統的異步編程方法。通過將一個函數作為參數傳遞給另一個函數，并在適當的時機調用它，可以避免阻塞。
function fetchData(callback) {
setTimeout(() => {
const data = 'Fetched data';
callback(data);
}, 1000);
}
fetchData((data) => {
console.log(data); // 輸出 "Fetched data"，在1秒后
});
使用Promise：
Promise是一種更現代的異步編程方法。它表示一個尚未完成但預計將在未來完成的操作。通過使用.then()和.catch()方法，可以避免阻塞。
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Fetched data';
resolve(data);
}, 1000);
});
}
fetchData()
.then((data) => {
console.log(data); // 輸出 "Fetched data"，在1秒后
})
.catch((error) => {
console.error(error);
});
使用async/await：
async/await是基于Promise的一種更簡潔的異步編程方法。通過在函數前添加async關鍵字，可以在函數內部使用await關鍵字等待Promise的結果，從而避免阻塞。
async function fetchData() {
try {
const data = await new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Fetched data';
resolve(data);
}, 1000);
});
console.log(data); // 輸出 "Fetched data"，在1秒后
} catch (error) {
console.error(error);
}
}
fetchData();
使用事件監聽器：
事件監聽器允許你在某個事件發生時執行代碼，從而避免阻塞。例如，可以使用addEventListener方法監聽DOM事件。
document.getElementById('myButton').addEventListener('click', () => {
console.log('Button clicked'); // 當按鈕被點擊時輸出 "Button clicked"
});
使用Web Workers： Web Workers允許你在后臺線程中運行JavaScript代碼，從而避免阻塞主線程。這對于執行耗時的計算任務非常有用。
// main.js
const worker = new Worker('worker.js');
worker.postMessage('Start');
worker.onmessage = (event) => {
console.log('Message from worker:', event.data);
};
// worker.js
self.onmessage = (event) => {
console.log('Message from main:', event.data);
self.postMessage('Hello from worker');
};
通過使用這些方法，可以在JavaScript代碼中避免阻塞，從而提高應用程序的性能和用戶體驗。
