坚持造轮子第二天 – 防抖与节流 – 内藏妹子福利-Js中文网

坚持造轮子第二天 - 防抖与节流 - 内藏妹子福利

福利在此

www.bilibili.com/video/bv1Tr…

二话不说轮子我都会造还怕你面试问吗？一天造一个轮子，干就完了。

看点

针对大厂笔试、面试必考手写题目
TDD方式开发
配合视频讲解

造轮子计划

（计划赶不上变化随时迭代欢迎留言随时摸鱼）

框架基础
- 框架基础
  - 模板引擎
  - 防抖、节流
  - 数据响应式
  - 统一状态管理
  - 时间旅行
  - 洋葱圈Compose
  - Flux模式
  - Promise
  - Thunk
  - HTML编译器
  - Pipe管道
  - 原生Ajax
- JS基础
  - Promise.all/race
  - 路由
  - new
  - call/apply/bind
  - Object.create
  - 深拷贝、浅拷贝
- 算法、设计模式
  - 二分查找
  - 快排
  - 二分查找
  - 冒泡排序
  - 选择排序
  - 订阅发布
  - 斐波那契算法
  - 去重
防抖和节流
防抖和节流可以说是一对好基友，也是前端面试的手写热点考题。防抖和节流其实都是在规避频繁触发回调导致大量计算，从而影响页面发生抖动甚至卡顿。简单的说将多次回调比如页面点击或ajax调用变为一次。防抖和节流的区别在于以第一次为准还是最后一次为准。
需求
Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
Javascript中文网是以前端进阶资源教程分享为主的专业网站，包括：前端、大厂面试题、typescript教程、程序人生、React.js……等，以帮助开发者成长为愿景的社区
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 任务完成
关注全栈然叔带你坚持天天造轮子（周末休息拒绝996）
- ### 源码地址 https://github.com/su37josephxia/wheel-awesome
本文使用 mdnice 排版