js 回调 同步回调 异步回调

时间：2021-01-14 23:29:10

一、回调
回调来说有一个关键词：函数参数，即把函数A当做参数传递到另一个函数B之中，这样当B(A)时，在B中会“”回过头“”再调用函数A()，把函数A叫做回调函数。
为了更方便的记忆：请记住 函数参数 回过头再调用。
二、首先先看一下没有用回调的情形

function f1() {
  var name = prompt('请输入你的名字。');
  return name
}

function f2(name) {
  alert('Hello ' + name);
}

var name = f1()
f2(name)
log(333333333)
上述代码先执行f1，再执行f2，如果f1需要消耗很长时间来执行，f2需要等待，故是同步操作，且没有用到回调。最后执行log(333333333)

三 、同步回调 的情形

function f2(name) {
  alert('Hello ' + name);
}

function f1(callback) {
  var name = prompt('请输入你的名字。');
  callback(name);
}
f1(f2);
log(222222222222)
上述代码，f2作为f1的回调函数，执行的时候，按顺序执行f1内的部分，f1执行到f2时，执行f2，再一次执行f1内剩下的部分，此时同样是同步操作。最后执行log(222222222222)

四、异步回调的情形

function f2(name) {
  alert('Hello ' + name);
}

function f1(callback) {
  setTimeout(function () {
    var name = prompt('请输入你的名字。');
    callback(name);
　　　　}, 10000);
}
f1(f2);
log(11111111111111)
此时f1内多了setTimeout函数，作用：延迟10000执行该函数内function部分。

注意：此时实验结果：是首先执行log(11111111111111)，当延迟10000之后，执行function，再回调f2，此时是异步操作。

文献：
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html Javascript异步编程的4种方法
https://developer.mozilla.org/zh-CN/docs/Glossary/Callback_function 回调函数

标签：

相关文章