JavaScript 回调


目录

    显示目录

“我稍后再打电话!”

回调是作为参数传递给另一个函数的函数

该技术允许一个函数调用另一个函数

回调函数可以在另一个函数完成后运行

功能顺序

JavaScript 函数按照调用顺序执行。 不按照它们定义的顺序。

此示例最终将显示“Goodbye”:

例子

 function myFirst() {
  myDisplayer("Hello");
}
function 
  mySecond() {
  
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

myFirst();
mySecond();
</script>

</body>
</html>

此示例最终将显示“Hello”:

例子

 function myFirst() {
  myDisplayer("Hello");
}
function 
  mySecond() {
  
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

mySecond();
myFirst();
</script>

</body>
</html>

顺序控制

有时您希望更好地控制何时执行函数。

假设您要进行计算,然后显示结果。

您可以调用计算器函数(myCalculator),保存结果, 然后调用另一个函数(myDisplayer)来显示结果:

例子

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;

}
let result = myCalculator(5, 5);
myDisplayer(result);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>

<p>The result of the calculation is:</p>
<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;
}

let result = myCalculator(5, 5);
myDisplayer(result);
</script>

</body>
</html>

或者,您可以调用计算器函数 (myCalculator), 并让计算器函数调用显示函数(myDisplayer):

例子

 function myDisplayer(some) {
  document.getElementById("demo").innerHTML 
  = some;
}
function myCalculator(num1, num2) {
  
  let sum = num1 + num2;
  
  myDisplayer(sum);
}
myCalculator(5, 5);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>

<p>The result of the calculation is:</p>
<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}

myCalculator(5, 5);
</script>

</body>
</html>

上面第一个示例的问题是您必须调用两个函数来显示结果。

第二个示例的问题是您无法阻止计算器功能 显示结果。

现在是时候引入回调了。



JavaScript 回调

回调是作为参数传递给另一个函数的函数。

使用回调,您可以调用计算器函数 (myCalculator) 带有回调(myCallback),并让计算器函数在计算完成后运行回调:

例子

 function myDisplayer(some) {
  document.getElementById("demo").innerHTML 
  = some;
}
function myCalculator(num1, num2, myCallback) {
  
  let sum = num1 + num2;
  
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>

<p>The result of the calculation is:</p>
<p id="demo"></p>

<script>
function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);
</script>

</body>
</html>

在上面的示例中,myDisplayer 被称为回调函数

它作为参数传递给myCalculator()

笔记

当您将函数作为参数传递时,请记住不要使用括号。

右:myCalculator(5, 5, myDisplayer);

错误: myCalculator(5, 5, myDisplayer());

例子

// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];

// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);

// Display Result
document.getElementById("demo").innerHTML = posNumbers;

// Keep only positive numbers
function removeNeg(numbers, callback) {
  const myArray = [];
  for (const x of numbers) {
    if (callback(x)) {
      myArray.push(x);
    }
  }
  return myArray;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body style="text-align: right">

<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>

<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];

// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);

// Display Result
document.getElementById("demo").innerHTML = posNumbers;

// Remove negative numbers
function removeNeg(numbers, callback) {
  const myArray = [];
  for (const x of numbers) {
    if (callback(x)) {
      myArray.push(x);
    }
  }
  return myArray;
}
</script>

</body>
</html>

在上面的示例中,(x) => x >= 0 是一个回调函数

它作为参数传递给removeNeg()


何时使用回调?

上面的例子并不是很令人兴奋。

它们被简化以教您回调语法。

回调真正发挥作用的是异步函数, 其中一个函数必须等待另一个函数(例如等待文件加载)。

异步函数将在下一章介绍。