|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
5示例分析了解JavaScript回調函數(callback function)
作者:admin 時間:2022-6-27 10:6:53 瀏覽:在 JavaScript 中，因為函數是對象，所以我們可以將它們作為參數傳遞給另一個函數。然后可以在另一個函數中調用這些函數，傳遞的函數稱為回調函數(callback function)。
在本文中，我們將借助示例了解 JavaScript 回調函數。
函數
函數是在調用時執(zhí)行特定任務的代碼塊。例如，
// function
function greet(name) {
console.log('Hi' + ' ' + name);
}
greet('WebKaka'); // Hi WebKaka
輸出
Hi WebKaka
在上面的程序中，一個字符串值作為參數傳遞給greet()函數。
回調函數
在 JavaScript 中，你還可以將函數作為參數傳遞給函數。在另一個函數內部作為參數傳遞的這個函數稱為回調函數。例如，
// 函數
function greet(name, callback) {
console.log('Hi' + ' ' + name);
callback();
}
// 回調函數
function callMe() {
console.log('我是一個回調函數');
}
// 作為參數傳遞函數
greet('WebKaka', callMe);
輸出
Hi WebKaka
我是一個回調函數
在上面的程序中，有兩個函數。調用greet()函數時，傳遞了兩個參數（一個字符串值和一個函數）。
callMe()函數是一個回調函數。
回調函數的好處
使用回調函數的好處是你可以等待前一個函數調用的結果，然后執(zhí)行另一個函數調用。
在此示例中，我們將使用setTimeout()方法來模擬需要時間執(zhí)行的程序，例如來自服務器的數據。
示例：帶有 setTimeout() 的程序
// 演示延遲執(zhí)行程序
function greet() {
console.log('Hello world');
}
function sayName(name) {
console.log('Hello' + ' ' + name);
}
// 調用函數
setTimeout(greet, 2000);
sayName('WebKaka');
輸出
Hello WebKaka
Hello world
上例可見，setTimeout()方法會在指定時間后執(zhí)行一段代碼，在這里，該方法在2000毫秒（2秒）后被調用greet()。在此等待期間，將執(zhí)行sayName('WebKaka'); ，這就是先打印Hello WebKaka再打印Hello world的原因。
上面的代碼是異步執(zhí)行的（第二個函數不等待第一個函數完成）。
示例：使用回調函數
在上面的例子中，第二個函數不等待第一個函數完成。但是，如果要在執(zhí)行下一條語句之前等待上一個函數調用的結果，則可以使用回調函數。例如，
// 回調函數示例
function greet(name, myFunction) {
console.log('Hello world');
// 回調函數
// 在greet()執(zhí)行后執(zhí)行
myFunction(name);
}
// 回調函數
function sayName(name) {
console.log('Hello' + ' ' + name);
}
// 2秒后調用函數
setTimeout(greet, 2000, 'WebKaka', sayName);
輸出
Hello world
Hello WebKaka
在上面的程序中，代碼是同步執(zhí)行的。函數sayName()作為參數傳遞給greet()函數。
該setTimeout()方法在2秒后執(zhí)行greet()函數，但是，sayName()函數等待greet()函數的執(zhí)行。
注意：當你必須等待需要時間的結果時，回調函數很有用。例如，來自服務器的數據，因為數據到達需要時間。
回調函數示例
假設創(chuàng)建了一個函數，該函數進行計算并將計算結果加倍：
function doubleResult(num1, num2, calc) {
return calc(num1, num2) * 2;
}
function add(num1, num2) {
return num1 + num2;
}
function multiply(num1, num2) {
return num1 * num2;
}
console.log(doubleResult(4, 2, add));
console.log(doubleResult(4, 2, multiply));輸出
12
16
在上面的代碼中，doubleResult接受三個參數num1、num2和calc。num1和num2是用戶想要在計算中使用的數字。calc是用戶作為第三個參數傳遞給doubleResult函數并包含計算代碼的函數。
add和multiply函數是兩個基本函數，它們將作為參數傳遞給它們的兩個數字相加或相乘。
在console.log語句中，doubleResult()函數以數字作為第一個和第二個參數調用，函數add和multiply作為第三個參數傳遞。
在上面的例子中，douleResult被稱為高階函數，而add和multiply被稱為回調函數。
回調函數示例
下面是回調函數的一個示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>JavaScript布爾構造函數屬性</h1>
<p class="sample"></p>
<button class="btn">點擊這里</button>
<h3>
單擊上面的按鈕調用add函數，該函數回調另一個函數
</h3>
<script>
function add(a, b, callback) {
callback(a + b);
}
function multiplyResultByTwo(res) {
document.querySelector(".sample").innerHTML = res * 2;
}
document.querySelector(".btn").addEventListener("click", () => {
add(4, 5, multiplyResultByTwo);
});
</script>
</body>
</html>
結果
上面示例中，單擊按鈕調用add函數，該函數回調另一個函數。
總結
回調函數在我們平時編程中，用到的機會還是比較多的。本文通過多個示例，我們應該了解了什么是回調函數，以及怎樣使用它。
相關文章
- 站長推薦
