防抖和节流的原理及应用场景

作用

防抖和节流是JavaScript 中常用的两种性能优化方式,它们的作用是减少函数的执行次数，以提高代码的性能

一.防抖

 防抖是指在某个事件频繁触发时，延迟一定时间后再执行回调函数。如果在延迟时间内又触发了同样的事件，那么会重新计时。从而避免了频繁触发回调函数，只在事件停止触发后执行一次

1.原理

 每次触发事件前都取消之前的延时调用方法

2.使用场景

按钮提交,防止多次提交按钮,只执行最后一次的搜索框联想,防止联想发送请求,只发送最后一次的输入

3.代码实现

function debounce(fn, delay = 300) {
  let time = null;
  function _debounce(...args) {
    if (time !== null) {
      clearTimeout(time);
    }
    time = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
  return _debounce;
}

fn: 实现防抖的函数

delay: 延迟调用的事件,默认为300毫秒

二.节流

节流是指在某个事件持续触发时，限制一定时间间隔只执行一次回调函数。比如，设置每1000毫秒最多执行一次回调函数，不论事件触发的频率有多高

1.原理

每次触发事件的时候,判断当前是否存在等待执行的延时函数

2.使用场景

拖拽场景:  固定时间内只执行一次,防止超高频次触发位置变动

缩放场景: 监控浏览器resize

 3.代码实现

function throttle(fun, delay = 1000) {
  let flag = true
  return function (...args) {
    if (!flag) return;
    flag = false
    setTimeout(() => {
      fun.apply(this, args)
      flag = true
    }, delay)
  }
}

fun: 实现防抖的函数

delay: 延迟调用的事件,默认为1000毫秒

总结:

防抖：在规定时间内，多次触发只响应最后一次。（多次触发，只执行最后一次）
节流：在规定时间内，多次触发只响应第一次。（规定时间内，只触发一次）