在編寫 JavaScript 時，我們經常會遇到異步與同步的問題。在某些情況下，當我們調用函數時，代碼會在函數返回值之前繼續執行。這就是異步編程的一個例子；反之，當代碼執行時被阻塞，并且直到一個函數的返回值返回后才繼續執行，則為同步編程。在本文中，我們將討論如何將異步的 JavaScript 代碼變成同步的。

假設我們有一個異步函數，它會在調用之后一段時間之后返回一個值：

function getValue(callback) {
setTimeout(() =>{
callback(42);
}, 1000);
}

上面的例子中，setTimeout() 函數會造成代碼被延遲執行 1 秒鐘。由于 JavaScript 是一種單線程語言，除非使用異步編程，否則代碼將被阻塞并無法執行其它任務。在這個例子中，我們使用了回調函數的形式，以便在異步函數 getValue() 執行完之后返回值。

雖然這樣可以工作，但是當異步函數多次嵌套使用時，代碼會變得混亂、難以理解。所以我們可能想要將異步變成同步代碼。

使用 Promise 進行異步操作的代碼更容易理解。Promise 使用更簡潔的語法，并且避免了回調地獄的問題。它允許我們輕松地返回異步函數的結果。例如：

function getValue() {
return new Promise((resolve) =>{
setTimeout(() =>{
resolve(42);
}, 1000);
});
}

通過將異步函數包裝在 Promise 中，我們可以使用 await 關鍵字在函數執行時暫停代碼。await 關鍵字使得執行代碼直到異步函數的結果返回之后才繼續執行。

async function myFunction() {
let value = await getValue();
console.log(value);
}
myFunction();

在上面的示例中，當 myFunction() 被調用時，代碼會暫停直到 getValue() 函數完全執行并返回結果。然后，打印返回的結果。

另一種方法是使用回調，這個方法提供了一種機制來檢查異步函數的狀態。我們可以編寫一個包裝函數，它返回目標函數的結果。如果函數能夠接收一個回調，我們可以在回調中將結果返回。這里的關鍵是，在調用包裝函數時，代碼將會被阻塞直到回調被觸發并返回結果。

function wrapWithCallback(func, callback) {
let result;
func((value) =>{
result = value;
callback(result);
});
return result;
}
let value = wrapWithCallback(getValue, (value) =>{
console.log(value);
});
console.log(value);

在這個示例中，wrapWithCallback() 函數接收一個帶有回調的函數，調用該函數并在回調中返回結果，最后將結果返回。在 getValue() 函數中，結果仍然是通過回調函數返回的。因此，在線程上阻塞代碼，直到回調函數被調用并返回結果。在控制臺中打印結果。

在 JavaScript 中，將異步代碼變成同步的過程并不容易。但是，希望這篇文章能夠幫助你了解一些方法，并幫助你以更清晰的方式編寫代碼。