防抖和节流的区别及实现

防抖

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。

function debounce(fn, timing) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn();
    }, timing);
  }
}

节流

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行效率。

function throttle(fn, timing) {
  let trigger;
  return function() {
    if (trigger) return;
    trigger = true;
    fn();
    setTimeout(() => {
      trigger = false;
    }, timing);
  }
}

DTTV（Debounce Timer Throttle Variable - 防抖靠定时器控制，节流靠变量控制）

Set、Map、WeakSet 和 WeakMap 的区别？

Set

  1. 成员不能重复；
  2. 只有键值，没有键名，有点类似数组；
  3. 可以遍历，方法有 add、delete、has

WeakSet

  1. 成员都是对象（引用）；
  2. 成员都是弱引用，随时可以消失（不计入垃圾回收机制）。可以用来保存 DOM 节点，不容易造成内存泄露；
  3. 不能遍历，方法有 add、delete、has；

Map

  1. 本质上是键值对的集合，类似集合；
  2. 可以遍历，方法很多，可以跟各种数据格式转换；

WeakMap

  1. 只接收对象为键名（null 除外），不接受其他类型的值作为键名；
  2. 键名指向的对象，不计入垃圾回收机制；
  3. 不能遍历，方法同 get、set、has、delete；

ES5/ES6 的继承除了写法以外还有什么区别？

  1. class 声明会提升，但不会初始化赋值。（类似于 let、const 声明变量）；
  2. class 声明内部会启用严格模式；
  3. class 的所有方法（包括静态方法和实例方法）都是不可枚举的；
  4. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有 [[constructor]]，不能使用 new 来调用；
  5. 必须使用 new 来调用 class；
  6. class 内部无法重写类名；

setTimeout、Promise、Async/Await的区别

  • setTimeout: setTimeout 的回调函数放到宏任务队列里，等到执行栈清空以后执行；
  • Promise: Promise 本身是同步的立即执行函数，当在 executor 中执行 resolve 或者 reject 的时候，此时是异步操作，会先执行 then/catch 等，当主栈完成时，才会去调用 resolve/reject 方法中存放的方法。
  • async: async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

宏观任务队列、微观任务队列的区别

function *

function* 这种声明方式(function关键字后跟一个星号）会定义一个*生成器函数 (*generator function)，它返回一个 Generator 对象。

Async/Await 如何通过同步的方式实现异步

Async/Await 其实是generate函数的语法糖，想搞清楚用同步的方式实现异步只要搞清generate函数内部的机制就好了

Generator-函数

协程

传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。

其中有一种叫做"协程"（coroutine），意思是多个线程互相协作，完成异步任务。

协程有点像函数，又有点像线程。它的运行流程大致如下:

  1. 第一步，协程A开始执行。
  2. 第二步，协程A执行到一半，进入暂停，执行权转移到协程B。
  3. 第三步，（一段时间后）协程B交还执行权。
  4. 第四步，协程A恢复执行。

上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。

举例来说，读取文件的协程写法如下。

function* asyncJob() {
  // ...其他代码
  var f = yield readFile(fileA);
  // ...其他代码
}

上面代码的函数asyncJob是一个协程，它的奥妙就在其中的yield命令。

它表示执行到此处，执行权将交给其他协程。

也就是说，yield命令是异步两个阶段的分界线。

协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。

它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。

协程的 Generator 函数实现

Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。

异步操作需要暂停的地方，都用yield语句注明。

Generator 函数的执行方法如下。

function* gen(x) {
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

上面代码中，调用 Generator 函数，会返回一个内部指针（即遍历器）g。

这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。

调用指针g的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句，上例是执行到x + 2为止。

换言之，next方法的作用是分阶段执行Generator函数。

每次调用next方法，会返回一个对象，表示当前阶段的信息（value属性和done属性）。

value属性是yield语句后面表达式的值，表示当前阶段的值；done属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

Generator-函数的数据交换和错误处理

Generator 函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。

除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。

next返回值的 value 属性，是 Generator 函数向外输出数据；next方法还可以接受参数，向 Generator 函数体内输入数据。

function* gen(x){
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

上面代码中，第一个next方法的value属性，返回表达式x + 2的值3。

第二个next方法带有参数2，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量y接收。

因此，这一步的value属性，返回的就是2（变量y的值）。

Generator 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。

function* gen(x){
  try {
    var y = yield x + 2;
  } catch (e){
    console.log(e);
  }
  return y;
}

var g = gen(1);
g.next();
g.throw('出错了');
// 出错了

上面代码的最后一行，Generator 函数体外，使用指针对象的throw方法抛出的错误，可以被函数体内的try...catch代码块捕获。

这意味着，出错的代码与处理错误的代码，实现了时间和空间上的分离，这对于异步编程无疑是很重要的。

JS 异步解决方案的发展历程以及优缺点

回调函数

优点： 解决了同步的问题（整体任务执行时长）；

缺点： 回调地狱，不能用try catch 捕获错误，不能return;

Promise

优点： 解决了回调地狱的问题；

缺点：无法取消Promise，错误需要通过回调函数来捕获；

Generator

特点：可以控制函数的执行

Async/Await

优点： 代码清晰，不用Promise写一大堆then链条，处理了地狱回调的问题；

缺点：await将一步代码改造成同步代码，如果多个异步操作没有依赖性而使用await会导致性能上的损耗；

Q.E.D.

I thrive to be a creator of things.