前端小技巧: 区分防抖和节流的方法

一、防抖 Debounce

1 )简单描述

  • 防止抖动,防止你抖动过程中,执行下一步,等你停止了,再执行下一步
  • 场景:输入框,等输入停止或者间歇,才去做
    • 监听一个输入框,文字变化后出发change事件
    • 直接用keyup,则会频繁出发change事件
    • 用户输入或暂停时,才触发change事件
  • 注意,如果用户连续触发,清理之前的

2 )代码实现

js 复制代码
const input = document.getElementById('input')

// 防抖 封装
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null
    return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            // 注意这里的this, 结合下面的调用,fn不能是箭头函数
            fn.apply(this, arguments)
            // fn(); // 这样也可以,但是不如上面全面
            timer = null
        }, delay)
    }
}

input.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

二、节流 Throttle

1 )简单描述

  • 节流,节省交互沟通
  • 按照时间节奏来,插队者无效
  • 场景
    • drag 或 scroll 期间触发某个回调,要设置一个时间间隔
      • 拖拽一个元素,要随时拿到该元素被拖拽的位置
      • 直接用drag事件,则会频繁触发,导致卡顿
      • 节流的目的是无论拖拽速度多快,每隔一定时间才去触发一次
    • 轮播图的左右按钮
    • 关注/取消关注的点击

2 )代码实现

ts 复制代码
const div = document.getElementById('div');

// 节流的封装
function throttle(fn, delay = 100) {
    let timer = null
    return function () {
        if (timer) return;
        timer = setTimeout(() => {
            // 注意,这种写法,arguments是为了获取下面的e
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

div.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))
  • 等当前结束再执行,可加哨兵变量或者直接使用 timer 来判断
  • 一般而言100的delay即可,场景是 拖拽、滚动时展示 坐标

总结

  • 节流:限制执行的频率,有节奏的执行,关注过程
  • 防抖:限制执行次数,多次密集触发只执行一次,关注结果
相关推荐
泯泷4 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san7 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar34 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron