JS 防抖和节流

防抖(debounce)和节流(throttle)是JavaScript中常用的性能优化技术,用于限制某些高频率触发的函数执行次数,减少不必要的计算和网络请求。下面分别介绍防抖和节流的实现方式。

防抖(Debounce)

防抖的原理是在事件触发后等待一段时间,如果在这段时间内没有再次触发该事件,就执行函数;如果再次触发了该事件,则重新计时。这样可以确保只有事件停止触发后才会执行函数。

 function debounce(func, delay) {let timer;return function() {const context = this;const args = arguments;clearTimeout(timer);timer = setTimeout(function() {func.apply(context, args);}, delay);};
}

使用示例:

// 定义一个需要防抖处理的函数
function search() {// 执行搜索操作
}// 创建防抖函数
const debouncedSearch = debounce(search, 300);// 添加事件监听器
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", debouncedSearch);

当用户输入搜索关键字时,会触发input事件并调用debouncedSearch函数。但由于应用了防抖,只有在停止输入300毫秒后才会实际执行搜索操作。

节流(Throttle)

节流的原理是规定一个时间间隔,在这个时间间隔内,只能执行一次函数。如果在该时间间隔内多次触发该函数,只有第一次会被执行,后续的触发将被忽略。

function throttle(func, interval) {let lastTime = 0;return function() {const currentTime = Date.now();if (currentTime - lastTime > interval) {func.apply(this, arguments);lastTime = currentTime;}};
}

 使用示例:

// 定义一个需要节流处理的函数
function scrollHandler() {// 处理滚动事件
}// 创建节流函数
const throttledScroll = throttle(scrollHandler, 200);// 添加事件监听器
window.addEventListener("scroll", throttledScroll);

 当用户滚动页面时,会触发scroll事件并调用throttledScroll函数。由于应用了节流,每200毫秒才会实际处理一次滚动事件,减少了函数的触发次数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/126529.shtml

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

相关文章

如何创建一个react项目

文章目录 前言前言打开小黑窗口npm init vite后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:react.js 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误&am…

84.在排序数组中查找元素的第一个和最后一个位置(力扣)

目录 问题描述 代码解决以及思想 知识点 问题描述 代码解决以及思想 class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {int left 0; // 定义左边界int right nums.size() - 1; // 定义右…

html各个标签的使用

一、标签的分类 1、单标签和双标签 1. 单标签&#xff1a;<img> img br hr 2. 双标签&#xff1a;<div></div> div span <a></a> h p a 2、按照标签属性分类 1. 块标签&#xff1a;自己独占一行 h1~h6 p div 2. 行内(内联)标签 …

uniapp原生插件之安卓获取设备唯一标识

插件介绍 安卓获取设备唯一标识&#xff0c;集成了获取imei&#xff0c;获取安卓ID&#xff0c;获取GUID&#xff0c;获取获取OAID/AAID等 插件地址 安卓获取设备唯一标识 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 uniapp 安卓获取设备唯一标…

安防视频监控平台EasyCVR服务器需要开启firewalld防火墙,该如何开放端口?

智能视频监控/视频云存储/集中存储/视频汇聚平台EasyCVR具备视频融合汇聚能力&#xff0c;作为安防视频监控综合管理平台&#xff0c;它支持多协议接入、多格式视频流分发&#xff0c;视频监控综合管理平台EasyCVR支持海量视频汇聚管理&#xff0c;可应用在多样化的场景上&…

MacOS安装git

文章目录 通过Xcode Command Lines Tool安装(推荐)终端直接运行git命令根据流程安装先安装Command Lines Tool后再安装git 官网下载二进制文件进行安装官方国外源下载二进制文件(不推荐)国内镜像下载二进制文件(推荐)安装git 通过Xcode Command Lines Tool安装(推荐) 简单来讲C…

Ubuntu 20.04设置虚拟内存 (交换内存swap)解决内存不足

数据库服务器程序在运行起来之后&#xff0c;系统内存不足。 在系统监控中发现&#xff0c;当数据库服务程序启动后&#xff0c;占用了大量内存空间&#xff0c;导致系统的剩余的内存往往只有几十MB。 在ubuntu系统中&#xff0c;swap空间就是虚拟内存&#xff0c;所以考虑在磁…

图数据库Neo4j——Neo4j简介、数据结构 Docker版本的部署安装 Cypher语句的入门

前言 MySQL是一种开源的关系型数据库管理系统&#xff0c;使用SQL作为其查询语言&#xff0c;常见的关系型数据库有MySQL、Oracle、SQL Server、PostgreSQL等。相关博客文章如下&#xff1a; 【合集】MySQL的入门进阶强化——从 普通人 到 超级赛亚人 的 华丽转身PostgreSQL数…

hustoj在线判题平台详细搭建二开及美化过程(ubuntu20.04 / centos7.9)常见问题解决

服务器配置需求 阿里云 腾讯云 华为云均可&#xff0c;腾讯云目前是最合适的。 腾讯云 2H4G 5M 60GB 轻量应用服务器 承载大约 200~400人使用&#xff0c;经过压力测试&#xff0c;评测并发速度可满足130人左右的在线比赛。 镜像选Ubuntu22.04LTS&#xff0c;物理机安装Ubun…

Windows下多Chrome谷歌浏览器版本共存

场景 某些年代久远的 WEB 应用&#xff0c;必须在指定的浏览器或版本才能正常运行&#x1f602;&#xff0c;此时就需要多个版本 chrome 浏览器共存。 解决方案 下载指定版本 可以从 https://www.chromedownloads.net/ 下载需要的版本&#xff0c;此处下载的是87.0.4280.14…

分布式锁-Redis红锁解决方案

一 分布式锁的概念 1&#xff1a;概念 分布式锁&#xff08;多服务共享锁&#xff09; 在分布式的部署环境下&#xff0c;通过锁机制来让多客户端互斥的对共享资源进行访问控制分布式系统不同进程共同访问共享资源的一种锁的实现。如果不同的系统或同一个系统的不同主机之间共…

虹科资讯 | 10月智能制造行业动态回顾

文章来源&#xff1a;虹科工业控制 阅读原文&#xff1a;https://mp.weixin.qq.com/s/0jR_QgmR6tmrRoTFAo8mFw 10月&#xff0c;虹科与PLCopen合作开展IEC 61131-3培训&#xff0c;目前正在火热报名中&#xff1b;人工智能领域的迅猛发展引起了智能制造业的广泛关注&#xff…

都2023年了,不会还有人不会设计软件测试用例叭?不会吧不会吧

一、概念 测试用例的基本概念&#xff1a; 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素 。 主要步骤&#xff1a; 测试环境——测试步骤—…

逻辑(css3)_强制不换行

需求 如上图做一个跑马灯数据&#xff0c;时间、地点、姓名、提示文本字数都不是固定的。 逻辑思想 个人想法是给四个文本均设置宽度&#xff0c;不然会出现不能左对齐的现象。 此时四个文本均左对齐&#xff0c; 垂直排列样式也比较好看&#xff0c;但是出现一个缺点&#…

激光雷达标定板提高自主驾驶功能的感知精度

激光雷达&#xff08;LiDAR&#xff09;是一种通过发射激光束并测量反射回来的时间来测量目标距离和形状的传感器。为了提高激光雷达的感知精度和稳定性&#xff0c;需要进行激光雷达标定&#xff0c;以确定其激光束的准确性和稳定性。 如果没有激光雷达&#xff0c;自动驾驶的…

【Git】Git暂存使用

当我们正常使用Git切换分支时&#xff0c;会出现以下提示&#xff08;请在切换分支之前提交您的更改或隐藏它们&#xff09;&#xff1a; Please commit your changes or stash them before you switch branches. 这是由于你现有分支上有修改还没有commit&#xff0c;而你又选择…

GPT与人类共生:解析AI助手的兴起

随着GPT模型的崭新应用&#xff0c;如百度的​1​和CSDN的​2​&#xff0c;以及AI助手的普及&#xff0c;人们开始讨论AI对就业市场和互联网公司的潜在影响。本文将探讨GPT和AI助手的共生关系&#xff0c;以及我们如何使用它们&#xff0c;以及使用的平台和动机。 GPT和AI助手…

2127. 参加会议的最多员工数 (困难,基环内向树,拓扑排序)

思路&#xff1a; 将每个员工作为节点&#xff0c;喜欢的关系作为边&#xff0c;显然是能够组成若干张连通图的&#xff0c;关键就在于如何理解一张图首先要证明&#xff1a;任何一个第一步构成的图必是一个有且仅有一个环的连通图&#xff08;如下面图片所示&#xff0c;也称…

【uniapp】JavaScript基础学习-20231027

今天有找到一个比较好的网站 https://www.w3school.com.cn/js/index.asp 介绍也全面&#xff0c;内容也比较多。我觉得把最基本的语法看看&#xff0c;然后可以上手写代码了。其他的就是需要靠长期的学习和积累了。 基础语法的使用&#xff1a; 1、定义一个变量 2、对变量赋值 …

《TCP/IP详解 卷一:协议》第5章的IPv4数据报的总长度字段出现“不需要大于576字节的IPv4数据报“相关内容的解释

《TCP/IP详解 卷一&#xff1a;协议》第5章的IPv4数据报的总长度字段的一些解释&#xff0c;出现以下内容&#xff08;有省略&#xff09;&#xff1a; ....另外&#xff0c;主机不需要接收大于576字节的IPv4数据报.....以避免576字节的IPv4限制。 英文原文的内容&#xff08;有…