关于前端知识点防抖(Debouncing)& 截流(Throttling)

53 阅读1分钟

防抖(Debouncing)应用场景

  1. 搜索输入框

    • 用户在搜索框中输入内容时,只在用户停止输入后一定时间(如300毫秒)才发送搜索请求,而不是每输入一个字符就发送一次请求
    • 可以减少请求次数,减轻服务器压力。

给个栗子大家瞅瞅

  1. 窗口大小调整

    • 用户调整浏览器窗口大小时,只在调整结束后执行一次调整操作,而不是每次窗口大小变化时都执行。
    • 可以提高性能,避免多次触发导致界面重绘和性能问题。
  2. 表单验证

    • 用户在填写表单时,只在用户停止输入后进行验证,而不是每次输入都进行验证。
    • 可以减少验证次数,提高表单验证性能。

截流(Throttling)应用场景

  1. 滚动事件

    • 用户滚动页面时,每隔一段时间(如200毫秒)执行一次滚动处理操作,而不是每次滚动事件触发都执行。
    • 常用于实现无限滚动加载,减少滚动处理的频率,提升滚动性能。
  2. 窗口滚动和调整事件

    • 页面滚动和窗口调整时,每隔一定时间执行一次布局调整或数据加载操作,而不是每次事件触发都执行。
    • 可以避免频繁布局调整带来的性能问题。
  3. 鼠标移动事件

    • 用户移动鼠标时,每隔一段时间更新一次鼠标位置,而不是每次鼠标移动事件触发都更新。
    • 常用于拖拽操作和绘图应用,减少频繁更新带来的性能开销。

给个栗子大家瞅瞅