一个合格的中级前端工程师必须要掌握的28个JavaScript技巧

15. 实现函数 call 方法

原理就是将函数作为传入的上下文参数(context)的属性执行，这里为了防止属性冲突使用了 ES6 的 Symbol 类型

16. 简易的 CO 模块

使用方法：

run 函数接受一个生成器函数，每当 run 函数包裹的生成器函数遇到 yield 关键字就会停止，当 yield 后面的 promise 被解析成功后会自动调用 next 方法执行到下个 yield 关键字处，最终就会形成每当一个 promise 被解析成功就会解析下个 promise，当全部解析成功后打印所有解析的结果，衍变为现在用的最多的 async/await 语法

17. 函数防抖

leading 为是否在进入时立即执行一次， trailing 为是否在事件触发结束后额外再触发一次，原理是利用定时器，如果在规定时间内再次触发事件会将上次的定时器清除，即不会执行函数并重新设置一个新的定时器，直到超过规定时间自动触发定时器中的函数

同时通过闭包向外暴露了一个 cancel 函数，使得外部能直接清除内部的计数器

18. 函数节流

和函数防抖类似，区别在于内部额外使用了时间戳作为判断，在一段时间内没有触发事件才允许下次事件触发

19. 图片懒加载

getBoundClientRect 的实现方式，监听 scroll 事件(建议给监听事件添加节流)，图片加载完会从 img 标签组成的 DOM 列表中删除，最后所有的图片加载完毕后需要解绑监听事件

intersectionObserver 的实现方式，实例化一个 IntersectionObserver ，并使其观察所有 img 标签

当 img 标签进入可视区域时会执行实例化时的回调，同时给回调传入一个 entries 参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的 DOM 节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前 img 标签，同时解除对其的观察

（编辑：宿州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!