js中的节流(throttling)与防抖(debouncing)

节流与防抖都是限制函数执行频率的技术，它们的主要区别在于执行函数的时机不同:

• 节流： 控制函数在一段时间内只能执行一次，在这段时间内如果再次触发该函数，就会被忽略。
• 防抖：在一段时间内连续触发同一事件时，只执行一次函数。等到这段时间结束后才执行该函数

手写节流

思路分析

实现节流可以使用setTimeout()函数。在函数被调用时，如果一个定时器存在，则不执行任何操作。否则，设置一个定时器，在指定的时间内执行函数，然后清除定时器，这样函数在指定时间只会执行一次。

代码

function throttle(fn, delay) {
    let timer;
    return function (...args) {
      if (!timer) {
        timer = setTimeout(() => {
            fn.call(this, args);
            timer = null
        }, delay)
      }
    }
}

手写防抖

思路分析

创建一个定时器，当执行函数时，如果定时器不存在就设置一个延迟执行的函数，如果存在则清除定时器，再重新设置一个延时函数，在短时间内重复调用此函数只会执行一次函数。

代码

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

节流与防抖的应用场景

节流的应用场景

当我们需要限制事件触发频率时，可以使用节流技术。比如：

• 页面滚动：当页面滚动时，可能会触发大量的 scroll 事件，如果每次事件都触发相应的处理函数，会导致页面性能下降，因此可以使用节流技术来限制 scroll 事件的触发频率，比如每 100ms 只处理一次 scroll 事件。
• 鼠标移动：当鼠标在屏幕上移动时，可能会触发大量的 mousemove 事件，同样也可以使用节流技术来限制事件的触发频率，比如每 50ms 只处理一次 mousemove 事件。

防抖的应用场景

当我们需要等待用户停止操作后再执行相应的操作时，可以使用防抖技术。比如：

• 搜索建议：当用户在搜索框输入关键字时，我们可以使用防抖技术来等待用户停止输入后再向后台发送搜索请求，避免用户每输入一个字符就触发一次搜索请求。
• 按钮点击：当用户在短时间内多次点击一个按钮时，我们可以使用防抖技术来确保只执行一次相应的操作，避免重复执行或造成性能问题。

总之，节流和防抖技术在具体的应用场景中有各自的优势和适用性，需要根据具体的业务需求进行选择。