防抖与节流

1.防抖Debounce

• 指在某个事件频繁触发时，延迟一定时间后再执行回调函数。如果在延迟时间内又触发了同样的事件，那么会重新计时。
• 多���触发，只执行最后一次

  1.1应用场景

  • 搜索框实时搜索：当用户输入时，防抖可以用于延迟发送请求，避免频繁请求后端接口。
  • 表单输入验证：使用防抖函数可以延迟触发验证操作，只在用户输入完毕一段时间后进行验证，避免频繁的验证操作。
  • 窗口大小调整：当窗口大小调整时，防抖可以用于调整事件触发的频率，避免频繁操作导致页面抖动。

    1.2 实现防抖函数

    • 思路：延迟函数执行并重新计时以确保在一段时间内只执行一次函数

      const debounceDom = document.getElementById('debounce')// 使用防抖函数，确保在连续触发 keyup 事件时只触发一次 ajax 函数debounceDom.addEventListener('keyup', debounce(ajax, 500))// 模拟一个 ajax 请求function ajax() {console.log('这是一个请求');}// 实现防抖的函数function debounce(fn, time) {    let timer = null    return function () {    if (timer) { //说明上次定时器还没有执行完 清除上次定时器    clearTimeout(timer)    }    timer = setTimeout (() => {    // 使用apply将函数fn的执行上下文设置为当前函数的执行上下文，并传入当前函数的参数    fn.apply(this, arguments)     }, time)}}

      2.节流Throttle

      • 指规定一个单位时间（延迟 delay 时间），只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

        （）

      • 规定时间内，只触发一次

        2.1 应用场景

        • 页面滚动加载
        • 频繁点击按钮
        • 鼠标移动
        • 键盘按键
        • 动画场景：避免短时间内多次触发动画引起性能问题
        • 拖拽场景: 在某些场景下，频繁触发位置变动会造成性能问题

          2.2 实现节流函数

          • 用Date.now()获取时间来判断是否在规定时间内

            function throttle (fn, delay) {let prevTime = Date.now();return function(){if(Date.now() - prevTime > delay){fn.apply(this, arguments)prevTime = Date.now()}}}

            • 设置一个flag来标志

              function throttle (fn, delay) {let flag = truereturn function () {if (flag) {setTimeout(() => {fn.apply(this, arguments)flag = true}, delay)}flag = false}}

              （）