手写节流和防抖函数

最新推荐文章于 2025-03-31 23:23:36 发布

qq_51368103

最新推荐文章于 2025-03-31 23:23:36 发布

阅读量416

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_51368103/article/details/124558026

版权

JavaScript笔记专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了JavaScript中的两种性能优化技术——防抖(debounce)和节流(throttle)函数。防抖函数确保在给定时间内只执行最后一次调用，而节流函数则保证在特定间隔内只执行一次。通过示例代码，阐述了这两种函数的工作原理及其在实际应用场景中的使用，帮助开发者提高网页性能和用户体验。

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

1. debounce()防抖函数🍊

某个函数在短时间内只执行最后一次。

function debounce(fn,delay = 200) {
    if(typeof fn !== 'function'){
        return TypeError('fn is not a function')
    }
    let lastfn = null

    return function(...args) {
        if(lastfn){
            clearTimeout(lastfn)
        }
        lastfn = setTimeout(() => {
            lastfn = null
            fn.call(this,...args)
        },delay)
    }
}

2. throttle()节流函数🍊

某个函数在指定时间段内只执行第一次，直到指定时间段结束，周而复始。

function throttle(fn, delay = 200) {
    let flag = false
    return function (...args) {
        if (!flag) {
            flag = true
            setTimeout(() => {
                flag = false
                fn.call(this,...args)
            },delay)
        }
    }
}