JS:防抖与节流函数的实现与应用

一、防抖

防抖:一连串操作只执行一次。通过设置一个延迟时间,如果这段时间没有再次执行操作则运行目标函数,否则重新计时。

下面是一个防抖函数代码:

let a=1;
const add = () => {a++;
};
const debounce = (fun: Function, delay: number) => {let timer: any = null;return function () {clearTimeout(timer);timer = setTimeout(() => {fun();}, delay);};
};
const debounceAdd = debounce(add, 1000);

二、节流

节流:立即执行目标函数,接着设定时间间隔,计时结束后才可再次执行目标函数。

let a = 0;
const add = () => {a++;
};
const throttle = (fun: Function, delay: number) => {let timer: any = null;return function () {if (!timer) {fun();timer = setTimeout(() => {fun();timer = null;}, delay);}};
};
const throttleAdd = throttle(add, 1000);

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

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

相关文章

Everything 一款功能强大的搜索工具

要在电脑上使用Everything搜索文件,您需要使用以下步骤: 在您的电脑上下载并安装Everything软件。您可以从官方网站https://www.voidtools.com/downloads/下载最新版本的软件。 安装完成后,打开Everything软件。 在搜索栏中输入您要查找的文…

Java中如何处理大数据量的排序?

Java中如何处理大数据量的排序? 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,我们来讨论一下在Java中如何处理大数据量的排序问题…

JsonCpp:更简洁的序列化及反序列化

简介 jsoncpp 提供了一组简单易用的 API&#xff0c;使得在 C 程序中处理 JSON 数据变得更加方便和高效。 安装 linux环境下安装jsoncpp sudo apt-get update sudo apt-get install --reinstall libjsoncpp-dev建立软链接确保编译器找到头文件 #include <json/json.h>…

Java数据结构6-栈与队列

1. 栈(Stack) 1.1 概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则 压栈…

机电公司管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;管理员管理&#xff0c;客户管理&#xff0c;公告管理&#xff0c;考勤管理&#xff0c;请假管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;公告&#xff0c;机电零件&…

gitee配置ssh教程

生成公钥 执行命令&#xff1a; ssh-keygen -t rsa查看公钥 cat ~/.ssh/id_rsa.pub这个公钥就是要复制粘贴到Gitee中的ssh公钥。 配置Gitee SSH公钥 来到Gitee的ssh公钥中&#xff0c;配置

代码随想录算法训练营第四十六天| 121. 买卖股票的最佳时机 ,122.买卖股票的最佳时机II,123.买卖股票的最佳时机III

121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int maxProfit(int[] prices) {if(prices.length 0){return 0;}int[][] dp new int[prices.length][2];dp[0][0] 0;dp[0][1] -prices[0];for(int i1;i<prices.length;i){dp[i][0…

Go环境安装---附带每一步截图

Windows环境 Go安装包下载 下载后直接安装步骤按照即可。 测试 winR 输入cmd 在命令行输出go version可以看到自己的版本。 go env 查看环境变量 在桌面创建hello.go的文件 编写代码。注意&#xff0c;编码必修是UTF-8 在命令行输入路径刚刚代码所在的路径&#x…

动态选线,动态的选择变量的位宽

一、原理 参考博客&#xff1a;&#xff1c;Verilog&#xff1e; 语法技巧&#xff1a;数据位操作_verilog移位操作-CSDN博客 下图是从作者的博客cv过来的一张图&#xff0c;讲的非常的清晰。实现了动态的选择选择数据的位宽&#xff0c;只需要动态的改变base_expr就可以。 …

笔记:Mysql 安装

1&#xff0c;下载安装包 mysql-5.7.44-linux-glibc2.12-x86_64.tar2&#xff0c;上传并解压 tar -vxf mysql-5.7.44-linux-glibc2.12-x86_64.tar .gz 文件使用 tar -zvxf mysql-5.7.44-linux-glibc2.12-x86_64.tar mv mysql-5.7.44-linux-glibc2.12-x86_64 mysql-5.7.443&a…

Python 潮流周刊#58:最快运行原型的语言

△△请给“Python猫”加星标 &#xff0c;以免错过文章推送 本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&am…

暑假集中备考2024年汉字小达人:来做18道历年选择题备考吧

结合最近几年的活动安排&#xff0c;预计2024年第11届汉字小达人比赛还有4个多月就启动&#xff0c;那么孩子们如何利用这段时间有条不紊地准备汉字小达人比赛呢&#xff1f; 我的建议是充分利用即将到来的暑假&#xff1a;①把小学1-5年级的语文课本上的知识点熟悉&#xff0…

Python应用开发——30天学习Streamlit Python包进行APP的构建(12)

st.checkbox 显示复选框部件。 Function signature[source] st.checkbox(label, valueFalse, keyNone, helpNone, on_changeNone, argsNone, kwargsNone, *, disabledFalse, label_visibility"visible") Returns (bool) Whether or not the checkbox is checked. …

昇思25天学习打卡营第04天|数据集 Dataset

数据是深度学习的基础&#xff0c;高质量的数据输入将在整个深度神经网络中起到积极作用。MindSpore提供基于Pipeline的数据引擎&#xff0c;通过数据集&#xff08;Dataset&#xff09;和数据变换&#xff08;Transforms&#xff09;实现高效的数据预处理。其中Dataset是Pipel…

【QT】设置QTabWidget样式:上、下边线的显示与去除

目录 0.简介 1.环境 2.详细介绍 2.1我的原代码和显示效果 2.2 去掉QTabWidget的边框 2.3 单独留下边线 2.3.1 法一&#xff1a;通过【this->setDocumentMode(true);】设置下边线 2.3.2 通过【QTabWidget::pane】设置下边线 2.4单独设置上边线 2.5 优化界面tab 2.…

STM32的SPI通信

1 SPI协议简介 SPI&#xff08;Serial Peripheral Interface&#xff09;协议是由摩托罗拉公司提出的通信协议&#xff0c;即串行外围设备接口&#xff0c;是一种高速全双工的通信总线。它被广泛地使用在ADC、LCD等设备与MCU间&#xff0c;使用于对通信速率要求较高的场合。 …

css 布局出现无法去除的空白

案件介绍&#xff1a;在没有设置任何的css样式的情况下 文字顶部出现无法去除的空白 源代码 <div click"onClick" ><div class"tableTextButton--container"></div><Icon v-if"loading || thisLoading" type"ios-lo…

LeetCode热题100刷题2:283. 移动零、11. 盛最多水的容器、15. 三数之和、42. 接雨水

283. 移动零 挺简单的没啥说的 class Solution { public:void moveZeroes(vector<int>& nums) {//快慢指针 // 快指针负责往前遍历&#xff0c;慢指针记录快指针遍历过的把0撵走的最后一个元素的位置// 然后快指针遍历完之后&#xff0c;慢指针到结尾直接赋0就行in…

objective-c和c语言

Objective-C 是基于 C 语言开发的一种面向对象编程语言。具体来说&#xff0c;Objective-C 在 C 语言的基础上增加了面向对象编程的特性。以下是它们之间的关系和主要区别&#xff1a; 关系 基于 C 语言&#xff1a; Objective-C 完全兼容 C 语言代码。你可以在 Objective-C 程…

LeetCode题练习与总结:环形链表Ⅱ--142

一、题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测…