防抖与节流

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
    }
    }

相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程