JavaScript防抖（debounce）和节流（throttle）

最新推荐文章于 2024-09-28 09:43:40 发布

原创最新推荐文章于 2024-09-28 09:43:40 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript中防抖(debounce)和节流(throttle)的技术原理及实现方式。防抖主要用于控制高频事件触发，确保在指定时间内只执行一次函数；而节流则用于限制函数的执行频率，确保在一定时间间隔内只执行一次。这两种技术常用于优化用户体验，提高程序效率。

JavaScript防抖（debounce）和节流（throttle）

防抖
例如实时显示搜索框时，一定时间内只需要函数执行一次。

function debounce(fn,interval){
    let timeout = null;
    return function(){
    clearTimeout(timeout);
    timeout = setTimeout(()=>{
    fn.apply(this,arguement)
},interval)
}
}

节流
例如鼠标移动需要触发的函数，由于事件触发的频率过快，需要在一定时间触发一次函数，控制函数触发的频率。

function throttle(fn,interval){
    let canRun = true;
    return function(){
    if(!canRun)return;
    canRun = false;
    setTimeout(()=>{
    fn.apply(this,arguement);
    canRun = true;
},interval)
}
}