JavaScript 頁面回調函數
在前端開發中，JavaScript 頁面回調函數是非常常見的一個編程概念。所謂回調函數，就是將一個函數作為參數傳遞給另一個函數，然后在另一個函數中完成相關操作后，調用傳遞進來的函數。這種被調用的函數，就是回調函數，通過這樣的方式，可以實現異步編程。
下面舉例說明，比如一個需要訪問后端接口并獲取數據的頁面，首先我們需要構建一個 Ajax 請求，然后在獲取到數據后再進行渲染。

// 構建 Ajax 請求
function fetchData(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
callback(data); // 調用回調函數
}
};
xhr.open('GET', url, true);
xhr.send();
}
<br>
// 渲染數據
function renderData(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div>' + data[i].name + '</div>';
}
document.getElementById('data-list').innerHTML = html;
}
<br>
// 調用
fetchData('/api/data', renderData);

在上面的代碼中，fetchData 函數傳入了一個回調函數 renderData，當 Ajax 請求成功并獲取到數據后，調用 renderData 函數，將獲取到的數據進行渲染，并修改頁面展示。
再舉一個常見的例子，比如在需要上傳文件的頁面中，我們需要將文件選擇后，通過 Ajax 請求將文件進行上傳，但是上傳過程通常比較耗時，不能阻塞頁面的操作，這時候我們就可以利用回調函數，在上傳成功后更新頁面展示，而不影響后續操作。

// 上傳文件
function uploadFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText); // 調用回調函數
}
};
xhr.open('POST', '/api/upload', true);
xhr.send(file);
}
<br>
// 更新頁面展示
function updatePage(responseText) {
document.getElementById('upload-info').innerHTML = responseText;
}
<br>
// 文件選擇后上傳
document.getElementById('file-upload').addEventListener('change', function() {
var file = this.files[0];
uploadFile(file, updatePage);
});

在上面的代碼中，uploadFile 函數傳入了一個回調函數 updatePage，當上傳成功并獲取到服務器返回的響應后，調用 updatePage 函數，將響應更新到頁面展示。
總的來說，回調函數是一種非常方便的編程方式，尤其是在異步編程的場景下，可以有效避免代碼阻塞，并且使得程序結構更加清晰易懂。在實際開發中，我們需要融會貫通這種編程方式，并且不斷積累實踐經驗，以便更好地應對各種復雜場景。