坚持造轮子次日 - 防抖与节流

福利在此

www.bilibili.com/video/bv1Tr…

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

看点

• 针对大厂笔试、面试必考手写题目
• 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 任务完成

  关注全栈然叔 带你坚持每天造轮子 （周末休息 拒绝996）

  • 源码地址 https://github.com/su37josephxia/wheel-awesome

  本文使用 mdnice 排版