JS_js实现防抖节流函数

实现防抖函数

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  return function(...args) {
  	// 如果已经设定过定时器了就清空上一次的定时器
    if (timer) clearTimeout(timer)
    // 开始一个新的定时器，延迟执行用户传入的方法
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

适用场景：
按钮提交场景：防止多次提交按钮，只执行最后提交的一次 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

使用

<input type="text" id="input">
<script>
    function inputfun(value) {
        console.log(value);
    }

    const debounces = debounce(inputfun, 500)
    const ipt = document.getElementById("input")
    ipt.addEventListener('keyup', function (e) {
        debounces(e.target.value)
    })
</script>

实现节流函数

节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

适用场景：

• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能问题