这种问题吧,虽然说有组件等等可以解决,但是吧,东西还是得自己会的,下来就简单的记录下防抖节流吧。

应用场景

在进行窗口的 resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常差,此时我们可以采用 debounce(防抖)和 throttle(节流)的方式来减少调用频率,又不影响显示效果。

函数防抖:

函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执
行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时,简单说就是频繁操作只执行最后一次操作.

常见场景:模糊搜索

function debounce (fn, delay) {
  let timer = null;
  return function (...args) {
    // 重置:先清空+赋值
    timer && clearTimeout(timer);
     timer = setTimeout(() => {
      fn.apply(this, args);
   }, delay);
  };
}

函数节流

函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理,简单说就是间隔某个时间执行一次函数

常见场景:触底加载

function throttle (fn, interval) {
  let on = true;
  return function (...args) {
    if (on) {
        fn.apply(this, args);
      on = false;
      setTimeout(() => {
        on = true;
      }, interval);
    }
  };
}

总结

函数防抖:将几次操作合并为一次操作进行。原理是维护一个计时器,规定在延迟时间后触发函数,但是在延迟时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发。

区别:

函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来操作。

结合应用场景

防抖(debounce):

search 搜索联想,用户在不断输入值时,用防抖来节约请求资源。

window 触发 resize 的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。

节流(throttle)

鼠标不断点击触发,mousedown(单位时间内只触发一次)监听滚动事件,比如是否滑到底部自动加载更多,用 throttle 来判断。

最后修改:2021 年 12 月 05 日 12 : 30 AM
感谢大哥送来的卡布奇诺和冰阔乐!