看点
- 针对大厂笔试、面试必考手写题目
- TDD方式开发
- 配合视频讲解
造轮子计划
（计划赶不上变化 随时迭代 欢迎留言 随时摸鱼）
- 框架基础
- 框架基础
- 洋葱圈Compose
- Flux模式
- Promise
- Thunk
- HTML编译器
- Pipe管道
- 原生Ajax
- JS基础
- Promise.all/race
- 路由
- new
- call/apply/bind
- Object.create
- 深拷贝、浅拷贝
- 算法、设计模式
- 二分查找
- 快排
- 二分查找
- 冒泡排序
- 选择排序
- 订阅发布
- 斐波那契算法
- 去重
- 防抖和节流
防抖和节流可以说是一对好基友，也是前端面试的手写热点考题。防抖和节流其实都是在规避频繁触发回调导致大量计算，从而影响页面发生抖动甚至卡顿。简单的说将多次回调比如页面点击或ajax调用变为一次。防抖和节流的区别在于以第一次为准还是最后一次为准。
需求
1. 节流Throttle - 调用多次、只第一次调用有效
在一段时间内，不论触发多少次调用，都以第一次为准。 输入框补全提示，只需要每两秒补全一次。
用测试用例表示
it("节流Throttle", (done) => { const { throttle } = require("../index"); // 定义一个Mock函数 const mockFn = jest.fn(); // 封装为节流方法 const fn = throttle(mockFn, 10); // 同步调用两次 fn(1); fn(2); setTimeout(() => { const calls = mockFn.mock.calls; // 断言 mock方法只调用一次 expect(calls.length).toBe(1); // 根据参数判断以第一次调用为准 expect(calls[0][0]).toBe(1); done(); }, 50); });
- 2. 防抖Debounce 最后一次为准
在一段时间内，不论触发多少期回调，都已最后一次为准。 比如：以用户拖拽改变窗口大小，触发 resize 事件为例，会触发组件重新布局，这里面只有最后一次调用是有意义的。
it("防抖Debounce", (done) => { const { debounce } = require("../index"); const mockFn = jest.fn(); // 封装一个防抖函数 const fn = debounce(mockFn, 10); // 连续两次调用 fn(1); fn(2); setTimeout(() => { const calls = mockFn.mock.calls; // 断言只调用一次 expect(calls.length).toBe(1); // 断言以最后一次调用为准 expect(calls[0][0]).toBe(2); done(); }, 50); });
- 功能实现
节流
主要思路利用时间戳判断，每次调用判断和上一次调用的时间差异确定是否需要调用。 throttle实际是一个工厂函数，可以将一个函数封装为一个带有节流功能的函数。
module.exports.throttle = (fn, delay) => { // 定义上次触发时间 let last = 0; return (...args) => { const now = + Date.now(); console.log("call", now, last, delay); if (now > last + delay) { last = now; fn.apply(this, args); } }; };
- 防抖
实现的话可以使用定时器执行函数，新调用发生时如果旧调用没有执行就清除之前的定时器。
/** * 防抖Debounce */ module.exports.debounce = (fn, delay) => { let timer; return (...args) => { // 判断定时器是否存在，清除定时器 if (timer) { clearTimeout(timer); } // 重新调用setTimeout timer = setTimeout(() => { fn.apply(this, args); }, delay); }; };
- 测试
网络异常，图片无法展示
|
OK 任务完成
- 本文使用 mdnice 排版
