前端 JS 经典:防抖和节流函数

devtools/2024/9/24 10:06:08/

1. 防抖函数

防抖函数(Debounce Function)用于处理频繁触发的事件,确保在事件触发后的一段特定时间内,如果再次触发则重新计时,只有在这段时间内没有再次触发时,才真正执行相应的函数。

以下是一个简单的防抖函数的实现示例:

javascript">function debounce(func, delay = 1000) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};}// 使用示例function handleMove(event) {console.log(`鼠标 X 坐标: ${event.clientX}, 鼠标 Y 坐标: ${event.clientY}`);}document.addEventListener("mousemove", debounce(handleMove));

2. 节流函数

节流函数(Throttle Function)用于限制函数在一段时间内的执行频率。

以下是一个简单的节流函数的实现示例:

javascript">function throttle(func, delay = 1000) {let timer = null;return function (...args) {if (!timer) {timer = setTimeout(() => {func.apply(this, args);timer = null;}, delay);}};}function printMessage() {console.log("节流函数执行");}window.addEventListener("click", throttle(printMessage));


http://www.ppmy.cn/devtools/94254.html

相关文章

Git的基本操作

1.创建用户信息 打开终端cmd git -v 查看版本可以确认是否已经安装成功git config --global user.name [用户名] //如果用户名存在空格就需要打“ ”git config --global user.email [邮箱]git config --global credential.helper store //保存用户信息git config --global -…

C# Unity 面向对象补全计划 七大原则 之 合成/聚合复用原则( CARP)难度:☆☆☆☆ 总结:在类中使用类,而不是继承类

本文仅作学习笔记与交流,不作任何商业用途,作者能力有限,如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识,看不懂没关系 请看专栏:http://t.csdnimg.cn/mIitr,查漏补缺 1.合成/聚合复用原则&…

MySQL基础练习题34-游戏玩法分析4

目录 题目 准备数据 分析数据 总结 题目 报告在首次登录的第二天再次登录的玩家的 比率,四舍五入到小数点后两位。换句话说,你需要计算从首次登录日期开始至少连续两天登录的玩家的数量,然后除以玩家总数。 准备数据 ## 创建库 create…

MySQL基础练习题36-各赛事的用户注册率

目录 题目 准备数据 分析数据 题目 统计出各赛事的用户注册百分率,保留两位小数。 返回的结果表按 percentage 的 降序 排序,若相同则按 contest_id 的 升序 排序。 准备数据 ## 创建库 create database db; use db;## 创建Users表 Create table …

偏导数的可视化

偏导数的可视化 flyfish 函数 f ( x , y ) sin ⁡ ( x ) ⋅ cos ⁡ ( y ) f(x, y) \sin(x) \cdot \cos(y) f(x,y)sin(x)⋅cos(y) import numpy as np from sympy import lambdify, sin, cos from sympy.abc import x, y import matplotlib.pyplot as plt from mpl_toolk…

解决ONENOTE复制文字到外部为图片(Ditto)

默认情况下,在ONENOTE中记录的文字,在复制粘贴到外部时,会成为一张图片格式 如下图这段文字,粘贴到QQ中变为了图片 解决办法:安装Ditto Ditto下载链接 点击Download下载 双击安装.exe,选择安装路径后&…

2024.8.7(SQL语句)

一、回顾 1、主服务器 [rootslave-mysql ~]# yum -y install rsync [rootmaster-mysql ~]# yum -y install rsync [rootmaster-mysql ~]# tar -xf mysql-8.0.33-linux-glibc2.12-x86_64.tar [rootmaster-mysql ~]# ls [rootmaster-mysql ~]# tar -xf mysql-8.0.33-linux-glib…

Java如何使用 HTTP 请求下载图片

工具类: public FileInputStream fileDownload(String fileLink) throws Exception {System.out.println("开始下载"fileLink);// 转码中文URL url new URL(encodeURLChinese(fileLink));System.out.println("fileLink:"url);// 开始下载Trust…