函数节流和函数防抖实现

最新推荐文章于 2024-07-11 16:38:48 发布

Lin_熊米

最新推荐文章于 2024-07-11 16:38:48 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xiongmi_Lin/article/details/119914025

javascript 专栏收录该内容

5 篇文章

订阅专栏

1. 问题描述

需求：监听器浏览器当前窗口的滚动条，当用户滑动滚动条之后，返回当前滚动条与顶部之间的距离。

新建一个最简单的html测试模板

<!DOCTYPE html>
<html lang="en">
<head>
  <title>测试</title>
</head>
<body>
  <div id="dom"></div>
  <script>
    // 当前dom节点插入p标签，让浏览器当前窗口出现滚动条
    let dom = document.getElementById("dom");
    for(let i = 0 ; i < 20 ; ++i){
      let node = document.createElement("p");
      node.innerText = i;
      dom.appendChild(node)
    }
    function getScrollTop(){
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      console.log("滚动条位置:" + scrollTop);
    };
    window.onscroll = this.getScrollTop();
  //window.onscroll = this.throttle(this.getScrollTop(), 1000); //节流
  //window.onscroll = this.debounce(this.getScrollTop(), 1000); //防抖
  </script>
</body>
</html>

打开控制台，滑动滚动条，效果如图：
在这里插入图片描述

效果是实现了，但是当用户滑动滚动条的时候，控制台就一直在重复多次执行滚动事件，这对于浏览器来说，其实是多了很多不必要的消耗。所以从性能优化上考虑，我们更希望当用户进行操作的时候，浏览器的事件处理是以下两种情况之一（具体哪种视情况而定）。
（假设条件：时间间隔delay=1000ms 且除下述时刻之外的时间点，用户是不进行操作的）

时刻(ms)	0	500	1000	1500	2000	2500	3000	3500	4000	4500
用户是否滑动进度条	√	√	√	√	√	×	×	√	×	×
是否打印滚动条位置(节流)	-	-	√	-	√	-	√	-	-	√
是否打印滚动条位置(防抖)	-	-	-	-	-	-	√	-	-	√

2. 实现过程

2.1 函数节流（throttle）的实现方式

/*
 +需求：监听浏览器滚动事件，返回当前滚动条与顶部之间的距离
 +节流实现原理如下：
 +前提条件：即使用户不断拖动滚动条，也能在固定的某个时间间隔之后给出滚动条与顶部之间的距离
 +效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不工作，甚至过了这段时间才重新生效。【假如设置的delay = 1000ms，那么如果在短时间内大量触发同一事件，则每隔 1000ms 执行一次该事件函数。】
 +实现：使用setTimeout函数，加上状态位valid来实现
*/
/*
 fn [function] 需要节流的函数
 delay [number] 毫秒，节流期限值
*/
// 方式一：采用时间戳的方式
function throttle(fn, interval){
    let last = null;
    let now = new Date();
    let timer = null;
    return function(){
        if(last && now - last < interval){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                fn(),
                last = now;
            },interval);
        }else{
            last = now;
        }
    }
}

// 方式二：采用状态位
function throttle(fn, interval) {
  let valid = true;
  return function() {
    if (!valid) return false; // 休息中
    // 工作时间，执行函数并且在间隔时间内把状态设置为无效
    valid = false;
    setTimeout(() => {
      fn(), (valid = true);
    }, interval);
  };
}

// 方式三：判断当前定时器是否存在，如果存在表示还在冷却，并且在执行定时器fn之后消除定时器
function throttle(fn, interval) {
  let timer = null;
  return function() {
    if (timer) return false;
    timer = setTimeout(() => {
      fn();
      clearTimeout(timer)
      timer = null 
    }, interval);
  };
}

2.2 函数防抖（debounce）的实现方式

/*
 +需求：监听浏览器滚动事件，返回当前滚动条与顶部之间的距离
 +防抖实现原理如下：
 +前提条件：在第一次触发事件时，不立即执行函数，而是给出了一个期限值，比如200ms，然后：
 1. 如果在200ms内没有再次触发滚动事件，那么就执行函数
 2. 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
 +效果：如果短时间内大量触发同一事件，只会执行一次函数
 +实现：使用setTimeout函数，借助闭包实现
*/
/*
 fn [function] 需要防抖的函数
 delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay){
    let timer = null;  // 借助闭包
    return function(){
        if(timer){
            clearTimeout(timer)  //进入该分支，说明当前正在一个计时过程中，并且又触发了相同事件
        }
        timer = setTimeout(fn,delay)  //表示没有当前没有进行计时，开始一个新计时
    }
}