认识JavaScript中的防抖函数

作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
支持我：点赞+ 评论 + ⭐️收藏

---

---

作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
支持我：点赞+ 评论 + ⭐️收藏

前言

在JS防抖、节流实现过程中，返回一个函数是为了让其具有更好的通用性和灵活性

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、防抖是什么？

防抖是一种性能优化方法，它可以有效的减少因为函数被频繁调用，从而导致的性能上的消耗

• 当事件触发时，相应的函数并不会立即执行，会按照传入的时间推迟执行。
• 如果等待时间内再次被触发，那么之前的计时会被清除，重新开始计时，直到等待时间结束
• 只有当等待时间结束后，相应的函数才会被执行

---

1. deounce-v1的基本实现

function debounce (fn, delay) {
  let timer = null
  const _debounce = function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, delay)
  }
  return _debounce
}

2. deounce-v2的基本实现

• 解决了 v1版本中 this 指向 问题

function debounce (fn, delay) {
  let timer = null
  const _debounce = function () {
    if (timer) clearTimeout(timer)
    const context = this;
    const args = arguments;//ES5 
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
  return _debounce
}

3. 应用场景

• 在用户输入时，只有在输入完成后才会进行搜索
• 在窗口大小调整时，只有在调整完成后才重新计算布局
• 在滚动页面时，只有在停止滚动后才会加载更多的内容

4. 展示使用

下面是一个例子，展示如何使用返回的函数：

function handleClick() {
  console.log('clicked')
}

const debouncedClick = debounce(handleClick, 1000)
window.addEventListener('click', debouncedClick)

在这个例子中，我们定义了一个点击事件处理函数 handleClick，并使用 debounce 函数创建了一个新的函数 debouncedClick。然后，我们将 debouncedClick 作为 click 事件的回调函数，从而实现了防抖效果。

二、节流是什么？

1. throttle-v1的基本实现

代码如下（示例）：

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了防抖函数的实现以及应用场景（涉及闭包）