前端节流、防抖函数

news2025/7/15 21:37:57

节流

什么是节流?
节流就是同一个事件 一秒钟他执行了很多次。但是我不想他执行这么多次,我只想让他执行一次 或者两次。
那该怎么办? 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.coloradmin.cn/o/2343962.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【物联网】基于LORA组网的远程环境监测系统设计(机智云版)

基于LORA组网的远程环境监测系统设计(机智云版) 演示视频: 简介: 1.本系统有一个主机,两个从机。 2.一主多从的LORA组网通信,主机和两个从机都配备了STM32F103单片机与 LoRa 模块,主机作为中心设备及WIFI网关,负责接收和发送数据到远程物联网平台和手机APP,两个从机…

制作一款打飞机游戏22:表格导出

编辑器功能扩展 今天,我想让编辑器能够处理一个数组,这是编辑器将要编辑的东西,它只编辑数组。这些区域在后续的不同版本的编辑器中会有不同的含义,但现在我想创建一个模板,能够加载一个二维数组,并将二维…

Linux内核源码结构

目录 Linux内核源码结构 Linux内核版本命名 Linux内核版本选择 内核源码结构 arch:与CPU架构相关的源代码 block:磁盘设备的支持 COPYING文件 CREDITS文件 crypto:加密相关 Documentation: drivers:设备驱动 firmware:固件 fs:文件系统 include:头文件…

72.评论日记

【巫师】中美关税战02:应给人民爆装备,以及普通人如何应对(7条建议)_哔哩哔哩_bilibili 2025年4月26日11:03:31

Websocket自动发送消息客户端工具

点击下载《Websocket自动发送消息客户端工具》 1. 前言 在现代网络应用中,实时通信和即时数据传输变得越来越重要。WebSocket作为一种全双工通信协议,因其高效、实时的特点,被广泛应用于聊天应用、实时数据监控、在线游戏等领域。然而&…

STM32的开发环境介绍

目录 STM32软件环境 Keil软件在线安装 其他软件环境安装 STM32开发的几种方式 STM32寄存器版本和库函数版本 标准外设库的作用: STM32软件环境 STM32 的集成开发环境(IDE):编辑编译软件 常见的环境: (1)KEIL&a…

数据库系统概论(四)关系操作,关系完整性与关系代数

数据库系统概论(四)详细讲解关系操作,关系完整性与关系代数 前言一、什么是关系操作1.1 基本的关系操作1.2 关系数据语言的分类有哪些 二、关系的完整性2.1 实体完整性2.2 参照完整性2.3 用户的定义完整性 三、关系代数是什么3.1 传统的集合运…

基于 IPMI + Kickstart + Jenkins 的 OS 自动化安装

Author:Arsen Date:2025/04/26 目录 环境要求实现步骤自定义 ISO安装 ipmitool安装 NFS定义 ks.cfg安装 HTTP编写 Pipeline 功能验证 环境要求 目标服务器支持 IPMI / Redfish 远程管理(如 DELL iDRAC、HPE iLO、华为 iBMC)&…

使用 Node、Express 和 MongoDB 构建一个项目工程

本文将详细介绍如何使用 Node.js Express MongoDB 构建一个完整的 RESTful API 后端项目,涵盖: 项目初始化 Express 服务器搭建 MongoDB 数据库连接 REST API 设计(CRUD 操作) 错误处理与中间件 源码结构与完整代码 部署建…

【C++11】右值引用和移动语义:万字总结

📝前言: 这篇文章我们来讲讲右值引用和移动语义 🎬个人简介:努力学习ing 📋个人专栏:C学习笔记 🎀CSDN主页 愚润求学 🌄其他专栏:C语言入门基础,python入门基…

Python基于Django的全国二手房可视化分析系统【附源码】

博主介绍:✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…

VulnHub-DC-2靶机渗透教程

VulnHub-DC-2靶机渗透教程 1.靶机部署 [Onepanda] Mik1ysomething 靶机下载:https://download.vulnhub.com/dc/DC-2.zip 直接使用VMware导入打开就行 2.信息收集 2.1 获取靶机ip(arp-scan/nmap) arp-scan -l ​ nmap 192.168.135.0/24 2.2 详细信息扫描(nmap)…

n8n 中文系列教程_10. 解析n8n中的AI节点:从基础使用到高级Agent开发

在自动化工作流中集成AI能力已成为提升效率的关键。n8n通过内置的LangChain节点,让开发者无需复杂代码即可快速接入GPT-4、Claude等大模型,实现文本处理、智能决策等高级功能。本文将深入解析n8n的AI节点体系,从基础的Basic LLM Chain到强大的…

计算机网络 | 应用层(1)--应用层协议原理

💓个人主页:mooridy 💓专栏地址:《计算机网络:自定向下方法》 大纲式阅读笔记 关注我🌹,和我一起学习更多计算机的知识 🔝🔝🔝 目录 1. 应用层协议原理 1.1 …

MuJoCo 关节角速度记录与可视化,监控机械臂运动状态

视频讲解: MuJoCo 关节角速度记录与可视化,监控机械臂运动状态 代码仓库:GitHub - LitchiCheng/mujoco-learning 关节空间的轨迹优化,实际上是对于角速度起到加减速规划的控制,故一般来说具有该效果的速度变化会显得丝…

LVGL模拟器:NXP GUIDER+VSCODE

1. 下载安装包 NXP GUIDER:GUI Guider | NXP 半导体 CMAKE:Download CMake MINGW:https://github.com/niXman/mingw-builds-binaries/releases SDL2:https://github.com/libsdl-org/SDL/releases/tag/release-2.30.8 VSCODE&…

《USB技术应用与开发》第四讲:实现USB鼠标

一、标准鼠标分析 1.1简介 1.2页面显示 其中页面显示的“”不用管它,因为鼠标作为物理抓包,里面有时候会抓到一些错误,不一定是真正的通讯错误,很可能是本身线路接触质量不好等原因才打印出来的“”。 1.3按下鼠标左键 &#x…

一、鸿蒙编译篇

一、下载源码和编译 https://blog.csdn.net/xusiwei1236/article/details/142675221 https://blog.csdn.net/xiaolizibie/article/details/146375750 https://forums.openharmony.cn/forum.php?modviewthread&tid897 repo init -u https://gitee.com/openharmony/mani…

得物业务参数配置中心架构综述

一、背景 现状与痛点 在目前互联网飞速发展的今天,企业对用人的要求越来越高,尤其是后端的开发同学大部分精力都要投入在对复杂需求的处理,以及代码架构,稳定性的工作中,在对比下,简单且重复的CRUD就显得…

【算法】单词搜索、最短距离

单词搜索 这道题主要考察了深度优先遍历(DFS)算法。 我们通过几个简单例子来分析一些细节问题: 1. 要搜索的单词串:abc 搜索的过程中必须按照字母顺序,首先从矩阵中的第一个元素开始搜索,遇到字母a则开始深度优先遍历&#xff0…