日韩少妇无码一区二区免费视频,正在播放91精品嫖妓达人

技術(shù)頻道 - js技術(shù)

5示例分析了解JavaScript回調(diào)函數(shù)(callback function)

作者:admin 時(shí)間:2022-6-27 10:6:53 瀏覽:

在 JavaScript 中，因?yàn)楹瘮?shù)是對(duì)象，所以我們可以將它們作為參數(shù)傳遞給另一個(gè)函數(shù)。然后可以在另一個(gè)函數(shù)中調(diào)用這些函數(shù)，傳遞的函數(shù)稱為回調(diào)函數(shù)(callback function)。

在本文中，我們將借助示例了解 JavaScript 回調(diào)函數(shù)。

函數(shù)

函數(shù)是在調(diào)用時(shí)執(zhí)行特定任務(wù)的代碼塊。例如，

// function
function greet(name) {
    console.log('Hi' + ' ' + name);
}

greet('WebKaka'); // Hi WebKaka

輸出

Hi WebKaka

在上面的程序中，一個(gè)字符串值作為參數(shù)傳遞給greet()函數(shù)。

回調(diào)函數(shù)

在 JavaScript 中，你還可以將函數(shù)作為參數(shù)傳遞給函數(shù)。在另一個(gè)函數(shù)內(nèi)部作為參數(shù)傳遞的這個(gè)函數(shù)稱為回調(diào)函數(shù)。例如，

// 函數(shù)
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
}

// 回調(diào)函數(shù)
function callMe() {
    console.log('我是一個(gè)回調(diào)函數(shù)');
}

// 作為參數(shù)傳遞函數(shù)
greet('WebKaka', callMe);

輸出

Hi WebKaka
我是一個(gè)回調(diào)函數(shù)

在上面的程序中，有兩個(gè)函數(shù)。調(diào)用greet()函數(shù)時(shí)，傳遞了兩個(gè)參數(shù)（一個(gè)字符串值和一個(gè)函數(shù)）。

callMe()函數(shù)是一個(gè)回調(diào)函數(shù)。

回調(diào)函數(shù)的好處

使用回調(diào)函數(shù)的好處是你可以等待前一個(gè)函數(shù)調(diào)用的結(jié)果，然后執(zhí)行另一個(gè)函數(shù)調(diào)用。

在此示例中，我們將使用setTimeout()方法來(lái)模擬需要時(shí)間執(zhí)行的程序，例如來(lái)自服務(wù)器的數(shù)據(jù)。

示例：帶有 `setTimeout()` 的程序

//  演示延遲執(zhí)行程序

function greet() {
    console.log('Hello world');
}

function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// 調(diào)用函數(shù)
setTimeout(greet, 2000);
sayName('WebKaka');

輸出

Hello WebKaka
Hello world

上例可見，setTimeout()方法會(huì)在指定時(shí)間后執(zhí)行一段代碼，在這里，該方法在2000毫秒（2秒）后被調(diào)用greet()。在此等待期間，將執(zhí)行sayName('WebKaka'); ，這就是先打印Hello WebKaka再打印Hello world的原因。

上面的代碼是異步執(zhí)行的（第二個(gè)函數(shù)不等待第一個(gè)函數(shù)完成）。

示例：使用回調(diào)函數(shù)

在上面的例子中，第二個(gè)函數(shù)不等待第一個(gè)函數(shù)完成。但是，如果要在執(zhí)行下一條語(yǔ)句之前等待上一個(gè)函數(shù)調(diào)用的結(jié)果，則可以使用回調(diào)函數(shù)。例如，

// 回調(diào)函數(shù)示例
function greet(name, myFunction) {
    console.log('Hello world');

    // 回調(diào)函數(shù)
    // 在greet()執(zhí)行后執(zhí)行
    myFunction(name);
}

// 回調(diào)函數(shù)
function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// 2秒后調(diào)用函數(shù)
setTimeout(greet, 2000, 'WebKaka', sayName);

輸出

Hello world
Hello WebKaka

在上面的程序中，代碼是同步執(zhí)行的。函數(shù)sayName()作為參數(shù)傳遞給greet()函數(shù)。

該setTimeout()方法在2秒后執(zhí)行greet()函數(shù)，但是，sayName()函數(shù)等待greet()函數(shù)的執(zhí)行。

注意：當(dāng)你必須等待需要時(shí)間的結(jié)果時(shí)，回調(diào)函數(shù)很有用。例如，來(lái)自服務(wù)器的數(shù)據(jù)，因?yàn)閿?shù)據(jù)到達(dá)需要時(shí)間。

回調(diào)函數(shù)示例

假設(shè)創(chuàng)建了一個(gè)函數(shù)，該函數(shù)進(jìn)行計(jì)算并將計(jì)算結(jié)果加倍：

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接受三個(gè)參數(shù)num1、num2和calc。num1和num2是用戶想要在計(jì)算中使用的數(shù)字。calc是用戶作為第三個(gè)參數(shù)傳遞給doubleResult函數(shù)并包含計(jì)算代碼的函數(shù)。

add和multiply函數(shù)是兩個(gè)基本函數(shù)，它們將作為參數(shù)傳遞給它們的兩個(gè)數(shù)字相加或相乘。

在console.log語(yǔ)句中，doubleResult()函數(shù)以數(shù)字作為第一個(gè)和第二個(gè)參數(shù)調(diào)用，函數(shù)add和multiply作為第三個(gè)參數(shù)傳遞。

在上面的例子中，douleResult被稱為高階函數(shù)，而add和multiply被稱為回調(diào)函數(shù)。

回調(diào)函數(shù)示例

下面是回調(diào)函數(shù)的一個(gè)示例。

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
</style>
</head>
<body>
<h1>JavaScript布爾構(gòu)造函數(shù)屬性</h1>
<p class="sample"></p>
<button class="btn">點(diǎn)擊這里</button>
<h3>
單擊上面的按鈕調(diào)用add函數(shù)，該函數(shù)回調(diào)另一個(gè)函數(shù)
</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>