异步函数理解及第三方库使用遇到的问题

[babysodme]

Javascript入门问题记录

异步函数理解产生的问题
问题背景：
长时间以来才对理解间接返回和异步处理的关系以及在使用第三方库过程中遇到的问题。

基础知识理解

1. 函数的定义

• 函数语法定义：
  function print(content) { console.log(content); }
  使用情景：全局声明，高频次使用。

• 函数表达式定义方式
  var print = function (content) { console.log(content); }
  使用情景：局部使用，省略变量直接嵌套在函数内使用，低频次时使用，一次性函数。

2. 函数的处理顺序（函数包函数处理顺序）

• 在代码执行过程中解释器按照规则在运行环境中逐行处理；经历调用=>参数判断=>逻辑处理=>返回结果给调用者这个时候如果是调用的异步函数依旧这样执行只是会分两个线程出来各自处理，异步函数首先会返回好的然后判断、处理、通过callback函数在返回给调用者结果。

---

延伸理解：

• 函数与变量的关系：函数可以附值给变量相当于简化为一个词，极大的方便了局部或者全局来调用函数，变量又可以调用属性来调用函数，表达式和变量构造出函数又附值给变量这种彼此的操控处理太微妙了，好神奇。
• 灵活的使用两种定义方式在不同作用域可以大大减少代码数量，得当的使用会节省更多内存，一次性函数，局部变量，全局变量的合理划分可以减少错误的发生。
• 两种函数定义方式构造出的函数为更好的协作带来了可能性，陌生人就像使用Math.random（）一样灵活的使用vue等大量的第三方库，这件事情更微妙，更神奇了。
• html引用的css、vue、bootstrap等等第三方库，暂时只考虑js库，他们写了个超大函数封装在一起，不同情景传入不同参数调用不同的方法，
  猜应该更多的还是异步处理方式，相比同步处理异步太全能了。
• 同步和异步是两种不同的工作流，同步是单线处理，异步开了更多的线程。但其中函数的逐条执行原则是不变的，异步某种程度可不可以由若干同
  步单元函数构成。

---

那么问题来了

• 问题1:一个执行函数调用了一个异步函数，异步函数首先的反应是说声好的，然后就去判断参数、逻辑处理、返回结果。那么这个好的 是以什么样的方式传递给调用者的呢，如果自己想了解也想构造类似简单的异步函数需要了解什么资料呢？

• 问题2: 假如函数a()调用了异步b(),b(）简单处理后将参数传递给并调用异步c(),····假设依次传到m()了，好比老板调用了秘书、秘书却安排人事来处理、人事还安排他的助手处理那么这个最终返回结果过程会通过每次调用塞的callback函数原路返回对吗？

• 问题3:浏览器访问一个网址,服务器返回html+css+js这些文件，浏览器接收后渲染页面，执行js文件，假如这些js文件中有无限循环的函数，出于安全及节省资源考虑浏览器运行环境是不是要终止函数循环。？在没有get和post的请求下，怎么才能用函数控制页面的值不停的循环变化呢？就像标签可以加loop循环属性。需要用什么方法呢 ？

• 问题4:使用vue在body里挂上钩子，就可以通过函数来渲染页面，那么html文件里和<script>里彼此的变量和方法是怎么构建起连接的呢？

---

教师节快乐！

[xugy0926]

问题1:一个执行函数调用了一个异步函数，异步函数首先的反应是说声好的，然后就去判断参数、逻辑处理、返回结果。那么这个好的 是以什么样的方式传递给调用者的呢，如果自己想了解也想构造类似简单的异步函数需要了解什么资料呢？

=> 异步函数收到一次调用，会执行一个严谨过程后（执行完内部的所有代码），再告诉调用者“好”。

比如：

function checkFlightSchedule(callback) {
  console.log('开始查航班信息');

  setTimeout(function() {
    // 模拟构建航班的时间信息
    var scheduleInfo = {
      start: '8/23 8:00',
      end: '8/23 10:30',
      from: 'beijing',
      to: 'hangzhou'
    };

    callback(scheduleInfo.start);
  }, 5000);

  return 'ok';
}

当checkFlightSchedule被调用，会执行里面所有的代码。意味着在checkFlightSchedule内部，异步的处理已经发起了，最后return一个'ok'告诉调用者我的调用已经结束了，有结果了会通过callback告诉你。

在平时代码中构建自己的异步可以用到nodejs的event。
https://nodejs.org/api/events.html

在初学js或者做功能时，自己构建异步的需求很少。一般业务上产生的异步都是因为我们用的某些api是异步而产生的异步行为。

[xugy0926]

问题2: 假如函数a()调用了异步b(),b(）简单处理后将参数传递给并调用异步c(),····假设依次传到m()了，好比老板调用了秘书、秘书却安排人事来处理、人事还安排他的助手处理那么这个最终返回结果过程会通过每次调用塞的callback函数原路返回对吗？

=> 当然会。事实上每一层嵌套调用传递的都是同一个callback。当然，也可以再每个函数内部重新构建一个新的callback嵌套。但这似乎没必要。

function a (callback) {
  b(callback)
}

function b(callback) {
   // do something
  callback();
}

a(function() {
  console.log('run callback');
});

以上事实上一直在嵌套传递同一个callback。

function a (callback) {
  b(function() {
    callback();
  })
}

function b(callback) {
   // do something
  callback();
}

a(function() {
  console.log('run callback');
});

以上，function a视乎多余做了一次嵌套callback，一般不建议，在具体业务时看具体情况来定夺。

[xugy0926]

问题3:浏览器访问一个网址,服务器返回html+css+js这些文件，浏览器接收后渲染页面，执行js文件，假如这些js文件中有无限循环的函数，出于安全及节省资源考虑浏览器运行环境是不是要终止函数循环。？在没有get和post的请求下，怎么才能用函数控制页面的值不停的循环变化呢？就像标签可以加loop循环属性。需要用什么方法呢 ？

=> 如果js代码只是在浏览器运行环境自循环，并不会出于安全考虑而终止，只会导致资源枯竭而异常。
如果无限循环在访问服务器资源，这可以视为一种攻击，安全问题会在服务端处理。比如通过某种手段直接断掉该ip的访问，这就是所谓的攻防技术。

如果想不停循环变化页面内容，最简单的方案就是用定时器。setTimeout来循环嵌套调用。

function callback() {
  // 你的业务逻辑
  setTimeout(callback, 1000);
}

setTimeout(callback, 1000);

以上代码1秒回调callback，callback函数内部又调用setTimeout。一直循环下去。

[xugy0926]

问题4:使用vue在body里挂上钩子，就可以通过函数来渲染页面，那么html文件里和<script>里彼此的变量和方法是怎么构建起连接的呢？

=> 如果抛开vue，html和js代码怎么处理（用js怎么控制html上的节点）？html有一个DOM概念，即浏览器的运行环境在加载完所有的节点后，会虚拟化出一颗树对象-- DOM树对象 -- 在代码就是document对象。这个对象在js代码中可以被访问。这时你就可以通过document对象来操作节点。

<script>
var element = document.getElementById('#title');
</script>

以上代码就是在js中通过document获取id为title的节点。
或者到这个节点element变量后，就可以通过element变量来改变这个节点的值。

html最繁琐的就是直接操作节点。vue技术帮我们把脏活累活给干了。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document

[babysodme]

多谢老师耐心的解答！