什么是防抖节流?

码农babyQ

已于 2023-10-22 17:48:29 修改

阅读量59

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2023-10-16 19:53:38 首次发布

本文链接：https://blog.csdn.net/qq_59068526/article/details/133867543

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了防抖和节流两种JavaScript技术的概念，它们在搜索建议和滚动事件处理中的应用，以及提供了相应的代码实现和使用示例，以优化性能和用户体验。

摘要由CSDN通过智能技术生成

1.概念

防抖：指触发高频事件后，函数只会执行一次。

节流：在持续触发事件时，保证一定时间段内只调用一次事件处理函数。

2.用途

在搜索功能中，当用户输入时，防抖可以确保只在用户停止输入后的一段时间内执行搜索建议词的更新功能，从而避免不必要的处理和数据请求。

在下拉加载或窗口大小改变等场景中，节流可以避免频繁调用事件处理函数，从而提高性能和用户体验。

3.代码实现

// 防抖函数
// 防抖函数接受两个参数：要执行的函数和等待的时间
function debounce(func, wait) {
    // 声明一个变量timeout，用于存储setTimeout返回的定时器ID
    let timeout

    // 返回一个函数，这个函数将清除上一次的定时器，并设置一个新的定时器来执行给定的函数
    return function () {
        // 清除上一次的定时器
        clearTimeout(timeout)
        // 设置一个新的定时器来执行给定的函数
        timeout = setTimeout(() => {
            // 使用apply方法执行给定的函数，并把当前的上下文和参数传递给它
            func.apply(this, arguments)
        }, wait)
    }
}

// 节流函数
// 节流函数接受一个参数：要执行的函数和每次执行的最小时间间隔
function throttle(func, limit) {
    // 声明一个变量inThrottle，用于表示是否在节流中
    let inThrottle

    // 返回一个函数，如果不在节流中，则执行给定的函数并更新状态，然后设置一个定时器来重置状态
    return function () {
        // 如果不在节流中
        if (!inThrottle) {
            // 使用apply方法执行给定的函数，并把当前的上下文和参数传递给它
            func.apply(this, arguments)
            // 更新状态为正在节流中
            inThrottle = true
            // 设置一个定时器来重置状态，时间间隔为limit毫秒
            setTimeout(() => (inThrottle = false), limit)
        }
    }
}

4.使用示例

// 防抖函数示例：避免连续点击按钮
const button = document.getElementById('myButton')
const debouncedClickHandler = debounce(() => {
    console.log('Button clicked!')
}, 500)

button.addEventListener('click', debouncedClickHandler)

// 节流函数示例：限制连续滚动事件处理程序
const scrollElement = document.getElementById('myScrollElement')
const throttledScrollHandler = throttle(() => {
    console.log('Scroll event detected!')
}, 200)

scrollElement.addEventListener('scroll', throttledScrollHandler)