防抖函数和节流函数

Z_ One Dream

已于 2022-04-21 22:13:03 修改

阅读量316

点赞数

分类专栏： javascript 前端文章标签：前端

于 2022-04-21 22:09:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42335036/article/details/124332928

版权

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

本文介绍了防抖和节流技术在前端开发中的应用场景。防抖函数用于限制函数的执行频率，例如在持续输入时的搜索触发，确保用户停止输入一段时间后才执行搜索操作。节流函数则确保在一定间隔内只执行一次函数，如滚动事件中控制图片懒加载，保证用户体验流畅。文中提供了两种防抖实现示例，以及一个节流函数的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖函数

顾名思义，防止你手抖不小心点了两次，或者说一直在抖

第一种，比如模糊搜索，人一直在输入，我们希望他在结束输入的时候执行搜索，但是我们并不知道他什么时候结束，所以我们假装他某个时间段内没有输入，就当他输入完成

function generateDebounce(fn, delay) {
    let timer
    let args
    return function() {
        args = arguments
        window.clearTimeout(timer)
        timer = window.setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

第二种防抖，点击登录按钮，然后不小心点了多次，这种比较简单

let loading = false
async function onClickLogin() {
    if (loading) return
    loading = true
    const result = await login(/** ...someArgs */)
    loading = false
}

节流函数

顾名思义，节省流量，这个和防抖很像，区别在于它是故意而为之，我们希望连续的执行方法在一个间断内执行，比如我们滚动条事件，我们搞了图片懒加载，我们需要实时对比滚动条的位置，但是不需要每次对比都执行一次，我们只需要让用户看上去是连续的就可以了

function generateThrottled(delay, callback) {
  let timer
  let args
  return function throttled() {
    args = arguments
    if (timer) return
    timer = window.setTimeout(() => {
      callback(...args)
      timer = null
    }, delay)
  }
}