js 手写防抖、节流函数

防抖

在第一次触发事件时,不立即执行函数,而是给出一个期限值,比如200ms

  • 如果在200ms内没有再次触发滚动事件,那么就执行函
  • 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
function debounce(fn,delay){let timer = nullreturn function() {if(timer){clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时}timer = setTimeout(fn,delay) // 计时}
}

节流

连续触发事件但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率。
方法一:该实现方式是通过使用setTimeout实现的,所以第一次不会立即调用回调函数。

function throttle(fn,delay){let valid = truereturn function() {if(!valid){//休息时间 暂不接客return false }// 工作时间,执行函数并且在间隔期内把状态位设为无效valid = falsesetTimeout(() => {fn()valid = true;}, delay)}
}

方法二:使用时间戳的形式实现节流函数,一旦触发该方法,回调函数会立即先调用一次。

function throttle(fn, delay) => {let pre = 0;return function(){let cur = new Date();if(cur - pre > delay){fn();pre = new Date();  }    }
}

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

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

相关文章

【Linux】LInux下的进程状态

👦个人主页:Weraphael ✍🏻作者简介:目前正在学习c和算法 ✈️专栏:Linux 🐋 希望大家多多支持,咱一起进步!😁 如果文章有啥瑕疵,希望大佬指点一二 如果文章对…

APP UI自动化测试,思路全总结在这里了

首先想要说明一下,APP自动化测试可能很多公司不用,但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的,所以为了更好的待遇,我们还是需要花时间去掌握的,毕竟谁也不会跟钱过不去。 接下来&#xff0c…

react/vue跳转到文章指定位置简单demo

antd 好像有差不多功能的插件 , 但要求使用arco , arco上面的例子就很,,, 或者说根本就没有 不如自己写 ,高度自定义 更加方便 , 有时候看别人的文档真的挺折磨的 vue跟react都差不多 &…

新书速览|数字身份认证技术与实践

本书不仅仅讲述标准解决方案以及相关理论,更重要的是以丰富的案例,讲透如何将这些理论应用到具体实际场景。 本书内容 《数字身份认证技术与实践》内容涵盖身份认证的基础理论,包括身份认证与授权的区别、常见的认证方式以及关键技术和协议&…

苹果App Store推出全新“关联定价”功能,助力开发者吸引留存订阅用户

苹果近日宣布推出App Store全新“关联定价”(contingent pricing)功能,旨在帮助开发者吸引并留住订阅用户。这项功能允许开发者为订阅用户提供折扣价格,前提是他们当前正在订阅另一项订阅服务。 苹果开发者网站上的一篇文章解释道…

代码随想录算法训练营33期 第五十天 | 188.买卖股票的最佳时机IV

dp[i][0] 不操作;d[i][1]第一次开始持有股票 //dp[i]当前天i的价值情况,dp[i][0]表示不操作的最大价值,dp[i][1]在当前天第一次持有的最大价值,dp[i][2]在当前天第一次卖出的最大价值, dp[i][3]在当前天第二次持有的最大价值&am…

苍穹外卖学习笔记(8.用户端历史订单模块,商家端订单管理模块)

目录 一、商家端订单管理模块1、查看历史订单2、查询订单详情3、取消订单4、再来一单5、代码开发6、测试 二、用户端历史订单模块1、订单搜索2、各个状态的订单数量统计3、查询订单详情4、接单5、拒单6、取消订单7、派送订单8、完成订单9、代码开发10、测试 三、校验收货地址是…

matlab学习005-利用matlab设计滤波器

目录 一,含有多个频率成分的三角信号 1,以采样频率fs20KHz对信号采样, 画出信号的波形; 1)前期基础 2)波形图 3)代码 2,选取合适的采样点数,利用DFT分析信号的…

Python静态资源库之webassets使用详解

概要 Python webassets库是一个用于管理静态资源的工具,如CSS、JavaScript等,帮助开发者更有效地管理和优化网站的静态文件。本文将介绍如何安装和使用Python webassets库,以及它的特性、基本功能、高级功能、实际应用场景和总结部分。 安装 首先,需要安装Python webasse…

Mysql索引详解(索引分类)

文章目录 概述索引对查询速度的影响索引的优缺点索引类型一级索引和二级索引的区别MySQL 回表联合索引(最左前缀原则主键索引和唯一索引的区别BTree索引和Hash索引的区别 覆盖索引索引下推加索引能够提升查询效率原因MySQL 索引结构采用 B树原因索引失效的场景MySQL…

知识图谱嵌入领域的重要研究:编辑基于语言模型的知识图谱嵌入

今天,向大家介绍一篇在知识图谱嵌入领域具有重要意义的研究论文——Editing Language Model-based Knowledge Graph Embeddings。这项工作由浙江大学和腾讯公司的研究人员联合完成,为我们在动态更新知识图谱嵌入方面提供了新的视角和方法。 研究背景 在…

kubernetes中的附件组件Metrics-server与hpa资源实现对pod的自动扩容和缩容

一、概述 Metrics-Server组件目的:获取集群中pod、节点等负载信息; hpa资源目的:通过metrics-server获取的pod负载信息,自动伸缩创建pod; 二、安装部署 Metrics-Server组件 安装目的,就是给k8s集群安装top…

Win 下 ncnn 编译运行

ncnn 官网上编译的过程比较详细,本文主要记录编译、运行过程中遇到的问题,希望可以帮到大家。 我的环境是 Win10 系统,VS 2022。 编译 先使用如下命令获取 ncnn 代码库: git clone https://github.com/Tencent/ncnn.git cd n…

【库函数】Linux下动态库.so和静态库.a的生成和使用

目录 🌞1. Linux下静态库和动态库的基本概念 🌞2. 动态库 🌊2.1 动态库如何生成 🌍2.1.1 文件详情 🌍2.1.2 编译生成动态库 🌊2.2 动态库如何使用 🌍2.2.1 案例 🌍2.2.2 动态…

DSP开发实战教程--#pragma CODE_SECTION使用技巧

#pragma CODE_SECTION 是一个编译器指令,通常用于嵌入式C编程,尤其是在使用TI(Texas Instruments)的编译器时。这个指令允许程序员将特定的函数或数据段放置在指定的内存区域。这在嵌入式系统中是非常有用的,因为你可以…

速卖通自养号测评:如何规避安全风险?

对于初涉电商领域的新卖家而言,进行销量测评显得尤为关键。由于速卖通新店铺往往难以获得平台活动的支持,流量也相对匮乏,因此,开店的首要任务便是进行测评,通过积累一定的评论和销售数据。 测评的益处颇多&#xff0…

【数据结构与算法】8.二叉树的基本概念|前序遍历|中序遍历|后序遍历

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更…

4.3网安学习第四阶段第三周回顾(个人学习记录使用)

本周重点 ①Java入门基础 ②Java方法入门 ③Java面向对象(**重点) ④Java的Maven构建项目工具 ⑤Java其他操作补充 ⑥Java序列化和反序列化 ⑦Url 的DNS 审计链(**难点) ⑧Springboot和前端数据分离(主流使用) ⑨Common Collections(CC链漏洞) 本周主要内容 ①Java入…

使用 Flutter 打造引人入胜的休闲游戏体验

作者 / Zoey Fan 去年,Flutter 休闲游戏工具包进行了一次重大更新。近期在旧金山举办的游戏开发者大会 (GDC) 上,Flutter 首次亮相。GDC 是游戏行业的顶级专业盛会,致力于帮助游戏开发者不断提升开发技能。欢迎您继续阅读,了解开发…

01、创建型-单例模式--只有一个实例

文章目录 前言一、基本介绍1.1 什么是单例模式1.2 为什么要用单例模式1.3 应用场景1.4 单例优缺点 二、单例模式的实现方式2.1 饿汉式单例2.1.1 静态变量方式2.1.2 静态代码块 2.2 懒汉式单例2.2.1 懒汉式单例2.2.2 懒汉式优化①-线程安全2.2.2 懒汉式优化②-双重检查锁2.2.3 懒…