当前位置: 首页 > news >正文

前端节流、防抖函数

节流

什么是节流?
节流就是同一个事件 一秒钟他执行了很多次。但是我不想他执行这么多次,我只想让他执行一次 或者两次。
那该怎么办? why baby why
那我想就是他执行的时候 我就设置一个定时器,如果定时器是空的,等会就去给你执行。如果你前面执行了马上又去执行,那不好意思你上次的都还没去执行,那这次我肯定不会去执行。定时器有值,那我就等上次执行了再去执行。

let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {// return //节流clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};

防抖

什么是防抖?
防抖就是同一个事件 一秒钟他执行了很多次。但是我只想让他没一直点击(执行)的时候才去 执行,就是你皮等你皮,等你累了,听话了我再去帮你办事
那该怎么办? why baby why
那我想就是他执行的时候,我就看你累了没 听话了不,如果听话 那我执行,不听话 你一直点 我就一直不去执行。

let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {return //节流//clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};

发现节流和防抖代码居然只有一行不同,这是为啥

  1. 节流 如果time里面的定时器函数未执行 已经在队列的时候 等待他执行了后再去执行
  2. 防抖 如果timer里面的定时器函数未执行 timer有值直接清除定时器 不让定时器函数执行上次未执行的代码块 然后再次调用定时器,等待执行

相关文章:

  • LVGL模拟器:NXP GUIDER+VSCODE
  • 深度学习-学习笔记
  • 字节跳动开源数字人模型latentsync1.5,性能、质量进一步优化~
  • 同世堂:让中医梦想照进职业星河
  • 搭建基于火灾风险预测与防范的消防安全科普小程序
  • 华为OD机试真题——素数之积RSA加密算法(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
  • ‌MySQL 事务隔离级别详解
  • 【蓝桥杯省赛真题56】Scratch抓不住的蜜蜂 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解
  • LiveCharts.WPF图表模块封装
  • 前端面试宝典---vue原理
  • arduino显示数码管1~9
  • 如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
  • 【SwitchyOmega安装教程】
  • 案例速成GO+redis 个人笔记
  • Llama factory如何全参数微调 Qwen2.5-7B-Instruct 模型并导入Ollama推理(详细版)
  • spark总结
  • uniapp开发04-scroll-view组件的简单案例
  • 启动命令汇总(Redis / Kafka / Flume / Spark)
  • DIFY 浅尝 - Dify + Ollama 抓取BBC新闻
  • Java学习手册:常用的内置工具类包
  • 消费维权周报|上周违规经营类投诉较多,涉诱导加盟等
  • 视觉周刊|2025上海车展的科技范
  • 伊朗港口爆炸已致40人死亡
  • 蚂蚁集团将向全体股东分红
  • 上海汽车贸易有限公司原总经理王璟接受监察调查
  • 韩冬任国家广播电视总局副局长,齐竹泉任中央广播电视总台副台长