通俗易懂的防抖节流

防抖

节流的原理

一段时间内，频繁触发一个事件(多次点击)，以最后一次为准

节流的使用场景

例如：一个搜索输入框，用户不停的进行输入（这个时候就是抖动的过程），等用户输入停止之后，再触发搜索

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

简单点的防抖函数

data:{
	timer:null
},

methods:{
  //在最后一次点击三秒后才会触发一次点击事件
  test(){
 // 新的事件发生会将这个定时器清除重新创建一个
      clearTimeout(this.timer)
    //自定义个定时器三秒后执行,只有三秒内不出现事件这个定时器才不会被销毁重构
        this.timer = setTimeout(()=>{
          console.log("防抖执行,这里就是你需要执行的操作")
        },3000)
	}
}

节流

节流的原理

在指定的时间间隔内，只允许函数执行一次。如果在这个时间间隔内再次触发函数，就会忽略掉，直到时间间隔过去后再次允许执行。

节流的使用场景

在前端开发中，一些事件（如滚动、拖拽、窗口调整等）可能会在短时间内频繁触发，导致性能问题。为了降低这种频繁触发带来的性能影响，可以使用节流来限制函数的执行频率

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

fn.apply(this, arguments) 是 JavaScript 中的函数调用方法。

fn 是一个函数，在这里代表传递给 debounce 函数的待执行函数。

.apply() 是 JavaScript 内置的方法，它可以在指定的作用域（this 的上下文）上调用函数，并传递额外的参数。

this 在这里指的是传递给 debounce 函数返回的匿名函数的执行上下文。

arguments 是一个包含了所有传入函数的参数的类数组对象。

综合起来，fn.apply(this, arguments) 的意思就是在指定的作用域（this 的上下文）下调用函数 fn，并将匿名函数接收到的参数（arguments）透传给它。

这样做的目的是确保函数 fn 在使用防抖函数时能够保留其原本的执行上下文和参数。