js 防抖、节流

2024-01-19 本文已影响0人简单tao的简单

一. 概念

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

二. 举例：

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

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

你不想频繁为你女票买单，于是约好每月清空购物车1次
防止过快拖动滚动条，导致 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>