防抖与节流

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 = true
    return function () {
    if (flag) {
    setTimeout(() => {
    fn.apply(this, arguments)
    flag = true
    }, delay)
    }
    flag = false
    }
    }

相关推荐
@PHARAOH24 分钟前
WHAT - Electron 系列(一)
前端·javascript·electron
半句唐诗1 小时前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs1 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5121 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript
大莲芒1 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hellyc1 小时前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习
CaveShao2 小时前
前端开发中常见的 SEO 优化
前端·seo
Hyyy2 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
Summer_Xu2 小时前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
李鸿耀2 小时前
📦 Rollup
前端·rollup.js