js节流函数，防抖函数，实际使用案例

最新推荐文章于 2025-06-12 17:10:21 发布

weixin_34192993

最新推荐文章于 2025-06-12 17:10:21 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca2fc366fb9a05e526d85d6

本文介绍了JavaScript中常用的节流(throttle)与防抖(debounce)函数实现方式及其应用场景。节流函数主要用于限制函数调用频率，适用于频繁触发且只需执行一次的场景；防抖函数则确保函数在一系列连续调用后只执行最后一次，适用于输入框实时搜索等操作。

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

节流函数

const limit = (dosomething,time)=>{
    let canDo = true;
    return ()=>{
        canDo = false;
        setTimeout(()=>{
            dosomething();
            canDo = true;
        },time)
    }
}
复制代码

使用场景

页面上的某些按钮有可能会连续的点击（如收藏按钮），但实际只想要执行成功一次，那么就可以使用节流函数。

防抖函数

const doLast = (dosomething,time){
    let timer = false;
    return ()=>{
        clearTimeout(timer);
        timer = setTime(()=>{
            dosomething();
        },time)
    }
}
复制代码

使用场景

let things = ()=>{alert('最后执行')}
let func = doLast(things,100)
window.addEventListener('resize', func);
/*
有很多的场景可以使用，例如，使用echarts时，改变浏览器宽度的时候，希望重新渲染
echarts的图像，可以使用此函数，提升性能。（虽然echarts里有自带的resize函数）
*/
复制代码