js防抖与节流

最新推荐文章于 2024-09-21 16:58:31 发布

喜枝儿

最新推荐文章于 2024-09-21 16:58:31 发布

阅读量157

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/ydz157/article/details/124725044

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了防抖和节流两种常见的前端性能优化技术，它们分别用于控制用户操作频率和延迟执行，以提升用户体验。防抖在用户停止操作后延迟执行，而节流则确保在一定时间内只执行一次。通过实例和代码展示，理解这两种技术在实际开发中的应用和区别。

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

防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。

特点：

等待某种操作停止后，加以间隔进行操作

持续触发不执行不触发

示例:

//fn是要执行的方法,wait是停顿多长时间后执行
function debounce(fn, wait){
    var timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
function handle(){
    console.log("执行");
}
//在频繁执行的事件里进行防抖处理
debounce(handle,800);

节流,顾名思义，控制流量。用于用户在与页面交互时控制事件发生的频率，持续触发并不会执行多次，事件停止触发后会再执行一次。

特点：

持续触发并不会执行多次

停止触发后再执行一次

埋点场景

示例：

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

参考博客：https://www.jb51.net/article/225610.htm