微信小程序版本更新提示

前言

今天来讲一个很简单的东西，防抖与节流，但是还是有很多小伙伴平时虽然一直在用这个技术，还是搞不懂这俩个的区别，本篇文章就来带大家了解一下防抖和节流的区别。

作用

它俩的作用比较类似，减少重复（方法）操作，缓解服务压力之类的。比如input的时候可以使用这俩减少触发input函数的触发次数。

概念

节流

1. 节流是一种限制事件处理函数执行频率的技术，确保事件在一定时间间隔内最多执行一次。
2. 当一个事件被触发，节流会立即执行事件处理函数，并在指定的时间间隔内忽略任何后续触发的相同事件。
3. 适用于需要定期更新的操作，如滚动事件、搜索框输入，确保它们不会太频繁地触发，减轻服务器和客户端的负担。

防抖

1. 防抖是一种延迟事件处理函数执行的技术，确保事件触发后，在指定的时间内没有更多事件触发时才执行一次事件处理函数。
2. 当一个事件被触发，防抖会等待一段时间，如果在这段时间内没有更多事件触发，那么事件处理函数将被执行。
3. 适用于防止重复提交表单、搜索建议等需要等待用户停止输入的场景。

区别

节流是在一定时间范围内最多执行一次的函数，他会在一开始就执行一次，然后在我们设置的时间范围内，无论发生多少次，他都只会触发一次，适用于需要限制事件频率的场景，确保事件在一定间隔内触发
防抖则是等待一段时间之后，如果没有再次触发这个函数，那么它将进行执行，否则将重新开始计算等待的时间，适用于等待用户停止操作之后执行的场景，比如搜索建议这些

简单区分就是节流你需要监听过程,防抖则是你只需要监听最后操作完成的结果

代码实现逻辑

节流

function throttle(fn, delay) {
  let lastExecutionTime = 0;
  return function(...args) {
    const currentTime = Date.now();
    if (currentTime - lastExecutionTime >= delay) {
      fn(...args);
      lastExecutionTime = currentTime;
    }
  };
}

防抖

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, delay);
    };
}

实际应用场景

监听滚动事件

节流:用于限制滚动事件处理的频率，以减少滚动事件的处理次数，从而提高性能。(适用于实时监听的)
防抖:用于延迟执行滚动事件处理，以确保用户完成滚动操作后再触发相关操作，例如加载更多数据。

窗口大小变化

节流:用于在窗口大小不断调整时，限制事件处理的频率，以避免过多的重绘操作。
防抖:用于确保只有在用户停止调整窗口大小后才执行相应的调整操作。

搜索框自动完成

防抖:用于在用户输入搜索关键字时，延迟执行自动完成搜索操作，以减少请求次数，降低服务器负担。

表单输入验证

防抖:用于在用户输入表单字段时，延迟进行验证操作，以减少验证请求的频率。

按钮点击事件

节流:用于限制按钮点击事件的频率，以避免用户多次点击导致的重复操作。

鼠标移动事件

节流:用于限制鼠标移动事件的频率，以减少处理次数，提高性能。

键盘敲击事件

节流:用于限制键盘敲击事件的频率，以减少处理次数，提高性能。

工具推荐

这两函数都不用我们自己写，引入lodash即可，相信大家平时也是这么使用的

结语

本篇文章就到这里结束了，更多内容敬请期待，债见~