首页 前端知识 JS中的防抖、节流

JS中的防抖、节流

2024-10-13 19:10:52 前端知识 前端哥 846 533 我要收藏

一. 概念

防抖:顾名思义,防止抖动,指连续调用时,只有最后一次生效。
节流:节省流量,固定时间间隔触发一次,减小频率。

二. 举例:

  1. 搜索功能,在用户输入结束以后才开始发送搜索请求,可以使用函数防抖来实现;
  2. 验证账号密码功能,在用户输入密码结束以后才开始发送验证请求,可以使用函数防抖来实现;

简单来说:某件事你并不想它太过频繁触发,那么设置一个定时器,每次进来的时候都清除原本的定时器,然后重新开始计时。

  1. 你不想频繁为你女票买单,于是约好每月清空购物车1次
  2. 防止过快拖动滚动条,导致 JS 跟不上拖动频率,通过节流限制每秒触发监听的次数(固定时间固定频率)

简单来说:年轻人要保持一日三餐,规律作息,那就通过节流来限制。

三. 手写防抖、节流思路

1. 首先函数需要哪些参数?
  • 都需要传递一个函数进去,返回一个防抖、节流后的新函数,因此第一个参数是需要处理的原函数fn
  • 光有原函数还不行,因为我们需要规定一个时间间隔。对于防抖而言:时间间隔用于表明最后一次调用时,隔多久没有再次触发,我们才真正调用函数。譬如,放盐时,手一直抖动,直到连续5秒没有抖动了,那么才放盐。这个5秒就是时间间隔。对于节流而言:时间间隔用于标志,每隔多久我们真正触发函数调用。就像是,一天只吃3顿,那么只有每顿间隔4个小时,我们才能吃饭。在没到4个小时时,不允许吃东西。所以,第二个参数是时间间隔,可写为wait

现在,我们可以写出防抖和节流函数的基本结构和参数:

// 防抖
function debounce(fn, wait=500) {
    return function () {
    }
}
 
// 节流
function throttled(fn, wait=500) {
    return function () {
    }
}
2. 原函数的执行条件是什么?
  • 对于防抖,当连续触发时,我们的目标是,不抖动时才调用。这也就是说,不满足时间间隔时,后一次触发会覆盖掉前一次触发。当满足时间间隔时,才会真正执行。
    满足时间间隔,指的是某一次触发之后,时间间隔范围内,没有下一次触发,这样不产生覆盖,因此会真正执行。由于有时间间隔的判断,因此即便真正执行,也需要延迟到时间间隔之后。这显然是定时器的概念。

  • 对于节流,当连续触发时,我们的目标是,每隔时间间隔时调用一次。这也就是说,我们每次设定固定时间的一个定时器,当定时器存在就什么都不做,当定时器不存在,就设定下一次的定时器。

综上,我们可以大致写出函数的执行时机,结构如下:

// 防抖
 
function debounce(func, wait=500) {
    let timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
         // 原函数执行部分
        }, wait);
    }
}
 
 
// 节流
 
function throttle(fn, wait = 500) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
              // 原函数执行部分
            }, wait);
        }
    }
}
3. 原函数执行

我们只需要直接调用fn,即fn()即可。但这样不够完善,需要注意两点:

  • 其一是this指向,新函数中调用原函数,两者的this指向应该一致;
  • 其二是参数,新函数中调用原函数,两者接收的参数应该一致。

故而,我们应该努力让新旧函数在这两方面保持一致。

// 防抖
function debounce(func, wait=500) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(this, args)
        }, wait);
    }
}
 
// 节流
function throttle(fn, wait=500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, wait);
        }
    }
}

注1:setTimeout回调中使用arguments:
若不是箭头函数,接收的是回调的实际参数,而不是新函数的实际参数。
若是箭头函数,由于箭头函数没有arguments对象,接收的就是新函数的实际参数。
注2:setTimeout回调中使用this:
若是箭头函数,由于箭头函数没有this,因此回调中的this是外层的this,
若不是箭头函数,回调中的this指向window。

4. 计时器何时重置?

在上面的代码中,防抖和节流何时进行计时器的重置呢?

  • 对于防抖:每次调用都会清除掉上一次的定时器,因此每次触发都会重置,可以看到clearTimeout写在定时器之前。
  • 对于节流:一开始没有定时器,触发事件后检测定时器是否存在,如果不存在则开启定时器执行函数,执行完函数后,在把定时器设为无,准备下一次开启定时器执行函数

故针对节流函数,增加清除操作,即增加timer=null重置语句:

// 防抖
function debounce(func, wait=500) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(this, args)
        }, wait);
    }
}
 
// 节流
function throttle(fn, wait = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            },wait);
        }
    }
}

详情参考

完整的防抖用例

<body>
    <button id="debounce">点我防抖!</button>
<script>
    // 防抖
    function debounce(func, wait = 500) {
        let timeout = null;
        return function (...args) {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                func.apply(this, args)
            }, wait);
        }
    }
    function sayDebounce() {
        console.log(this);
        console.log("防抖成功!");
    }

    window.onload = function () {
        var myDebounce = document.getElementById("debounce");
        myDebounce.addEventListener("click", debounce(sayDebounce));
    }
</script>
</body>

完整的节流用例

<body>
    <button id="throttle">点我节流!</button>
<script>
    // 节流
    function throttle(fn, wait = 500) {
        let timer = null
        return function (...args) {
            if (!timer) {
                timer = setTimeout(() => {
                    fn.apply(this, args);
                    timer = null;
                }, wait);
            }
        }
    }
    function sayThrottle() {
      console.log("节流成功!");
    }
    window.onload = function () {
        var myThrottle = document.getElementById("throttle");
        myThrottle.addEventListener("click", throttle(sayThrottle));
    }
</script>
</body>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18875.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!