当前位置: 首页 > 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有值直接清除定时器 不让定时器函数执行上次未执行的代码块 然后再次调用定时器,等待执行
http://www.xdnf.cn/news/154981.html

相关文章:

  • MobX 在 React 中的使用:状态管理的新选择
  • CS001-50-depth
  • JFLAP SOFTWARE 编译原理用(自动机绘图)
  • 4月26日星期六今日早报简报微语报早读
  • RabbitMQ 四种交换机(Direct、Topic、Fanout、Headers)详解
  • 代码随想录算法训练营Day35
  • 3、初识RabbitMQ
  • Java学习手册:常用的内置工具类包
  • 35-疫苗预约管理系统(微服务)
  • Jetpack Room 使用详解(下)
  • chrony服务器(1)
  • 我是如何用AI编程制作一个AI表情包生成的小程序
  • 【AI论文】DreamID:基于高保真和快速扩散的三元组ID组学习的人脸交换
  • Ragflow新建的知识库完成后刷新却没有显示,报错MethodNotAllowed: 405 Method Not Allowed:
  • 1软考系统架构设计师:第一章系统架构概述 - 超简记忆要点、知识体系全解、考点深度解析、真题训练附答案及解析
  • TC3xx学习笔记-UCB BMHD使用详解(一)
  • 多个请求并行改造
  • 使用 AFL++ 对 IoT 二进制文件进行模糊测试 - 第一部分
  • Ubuntu20.04部署Dify(Docker方式)
  • 顶点着色器和片元着色器染色+表面体着色器染色
  • 深入理解算力:从普通电脑到宏观计算世界
  • MySQL长事务的隐患:深入剖析与解决方案
  • 【Castle-X机器人】二、智能导览模块安装与调试
  • 【Castle-X机器人】四、智能机械臂安装与调试
  • 【C++】stack、queue和priority_queue的模拟实现
  • Android Compose 框架图像修饰深度剖析:从源码到实践(八)
  • ‌MySQL 事务隔离级别详解
  • 深入剖析 Vue 组件:从基础到实践
  • 5G融合消息PaaS项目深度解析 - Java架构师面试实战
  • Linux文件操作命令终极指南:从查看到高级搜索