防抖函数的实现

防抖函数的定义是当事件触发完成之后再延迟触发,并且只触发一次;如果在触发完成之前再次触发,则会再次刷新延迟;简单理解为(如果事件不触发即不执行,并且只会执行一次,就是定时器最后走的那一次)

  举个例子:假如有个弹簧,你一直往下按压只要你不松手就是不会弹出的,弹簧只有在你松手的那一瞬间才会弹出去;防抖函数也是如此,只要事情触发没有结束是不会执行的,只有在事件触发结束后延迟执行一次;

//定义方法即要做的事情
function fun(){console.log('onresize')}
//定义事件触发要执行的方法,两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn,delay){//定义一个变量作为等会清除对象var handle;//这里用到了闭包,一个函数里面return另一个函数,变量相互签引导致垃圾回收机制不会销毁handle变量return function(){//在这里一定要清除前面的定时器,然后创建一个新的定时器clearTimeout(handle) //最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发(这里的变量赋值是跟定时器建立连接,进行地址赋值,一定要重新赋值给handle  handle=setTimeout(function(){fn()},delay)}}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));

 防抖函数只会执行一次,且是最后触发的那一次

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

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

相关文章

银行家算法:解决多线程死锁问题

死锁: 死锁产生的现场:当A进程P S2信号量而B进程P S1信号量时就会产生死锁,因为S2信号量需要B进程释放,而S1信号量需要A进程释放,因此两个进程都在等相互的资源,造成死锁。 死锁产生的条件: 互斥…

节流函数的实现,一次面试题遇到的编程题

在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数;实现手机号、姓名之类的的验证,往往我们只需要验证一次&#…

guice注入带参构造器_带有Guice的富域模型

guice注入带参构造器贫血域模型是一个非常常见的反模式。 在ORM和DI框架的世界中,我们自然会发现自己拥有一个由ORM管理的“域”,该域包含所有数据且无行为。 通过我们的DI框架有帮助地注入了辅助类,这些辅助类都是行为且没有数据。 在本文中…

转:巧用搜狗输入法输入英文单词

转: http://www.techweb.com.cn/digi/experience/2013-06-03/1300700.shtml 你是否遇到过这样的情形:想打一个英文单词,但是忘了具体拼写是什么,只是记了个大概?比如“竞争”,到底是competetion还是competition呢?又…

服务器ping不通的解决办法之阿里云云服务器VNC报错Failed to execute /sbin/init

背景:最近买了一个阿里云的云服务器,今天想安装阿里云的操作文档搭建一个博客网站来着,发现服务器公网IP都ping不通 解决办法参考: 方法一:如何解决ping请求超时的问题 方法二:本地ping服务器连接不到,总是超时 我的防火墙已经关闭,内网切换移动网络也不行,安全组…

从ofcms的模板注入漏洞(CVE-2019-9614)浅析SSTI漏洞(freemarker模板)

https://www.cnvd.org.cn/flaw/show/CNVD-2019-08488 思路: 1、pom.xml的时候发现存在模版引擎freemarker http://t.zoukankan.com/Eleven-Liu-p-12747908.html 2、寻找修改模版的地方 TemplateController.java 3、添加执行Payload <#assign ex“freemarker.template.utilit…

集合中的可选

有时有人认为Optional类型值得在集合中使用。 据称&#xff0c;它解决了以下问题&#xff1a; HashMap在没有键映射以及值null映射到键的情况下返回null 。 如果使用Map<Optional<Something>>则可以清楚地区分缺少的映射和缺少的值。 这样一来&#xff0c;您在兔子…

当你不知道今天星期几,不妨在编辑器写下这段代码

背景:最近加班比较严重,天天废寝忘食的写代码,不知春夏,看看今天星期几啦,实现方式很多,下面演示一下switch的方式 html: <!DOCTYPE html> <html><head><meta charset="utf-8"><title>孙叫兽测试switch语句</title></…

05.html学习-表单

表单标签&#xff1a; 表单标签的作用是用于提交数据给服务器的。 表单标签的根标签是<form>标签常用的属性&#xff1a; action: 该属性是用于指定提交数据的地址。 method&#xff1a; 指定表单的提交方式。 get : 默认使用的提交方式。 提交的数据会显示在地址栏上。 …

在Log4j2中更好地执行非日志记录器调用

使用Log4j 1.x并希望避免在某些情况下可能会造成额外的性能影响&#xff08;即使实际上未记录该消息&#xff09;时&#xff0c;通常使用日志记录防护 。 Java的简单日志记录外观 &#xff08; SLF4J &#xff09;带给Java日志记录的最吸引人的功能之一是能够减少需要进行这些日…

javaScript学习笔记之运算符

运算符 = 用于赋值。用于给 JavaScript 变量赋值。 运算符 + 用于加值。算术运算符 + 用于把值加起来。 下面展示了算术运算符及赋值运算符: <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>孙叫兽测试运算符</…

编写高质量代码-OC 第7章 设计模式与Cocoa编程

45、设计模式是特定环境下的特定问题的解决方案46、MVC模式是一种复合或聚合模式47、对象建模在数据库中也广泛使用48、类簇可简化框架的公开架构而又不减少功能的丰富性 1、类簇基于抽象工厂设计模式2、类簇&#xff0c;可以用于隐藏实现的详细细节&#xff0c;为调用者提供一…

Goby反制复现

0x00 前言 最近复现Goby反制的时候遇到很多坑&#xff0c;记录一下反制过程以及遇到的坑点&#xff0c;还有世界上最强的黑客mux1ng帮我解决了很多问题。 0x01环境 攻击机&#xff1a; windows10 Goby1.8.230 172.20.10.3反制机&#xff1a; Windows7 Phpstudy2016 172.20.…

测试双重图案

前段时间&#xff0c;我写了一篇有关使用Test Double的后果的文章&#xff0c;但是与Test Double Patterns无关&#xff0c;仅是一个简单的清单。 今天&#xff0c;我想对其进行更改&#xff0c;并解释这些模式之间的差异。 正如我在提到的文章中写道&#xff1a; Test Doubl…

javaScript学习笔记之比较运算符||逻辑运算符||条件运算符(三目运算符)

比较运算符在逻辑语句中使用,以测定变量或值是否相等。 逻辑运算符用于测定变量或值之间的逻辑。 javaScript基于某些条件对变量进行赋值的条件运算符(三目运算符)。 HTML: <!DOCTYPE html> <html> <head><meta charset="utf-8"><title…

类的依赖注入

http://www.360doc.com/content/14/0421/09/10504424_370757998.shtml转载于:https://www.cnblogs.com/changbaishan/p/4949225.html

JDK 9:模块系统状态的重点

马克雷因霍尔德 &#xff08; Mark Reinhold &#xff09;的“模块系统状态 &#xff08;SOMS&#xff09;”已于本月初发布&#xff0c;它提供了信息丰富的可读性“对项目Jigsaw中原型的Java SE平台进行了增强的非正式概述&#xff0c;并被提议作为JSR 376的起点。” 在这篇文…

fckeditor漏洞_三十,文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御

一.编辑器漏洞 1.编辑器 编辑器属于第三方软件&#xff0c;它的作用是方便网站管理员上传或编辑网站上的内容&#xff0c;类似我们电脑上的Word文档。 编辑器通常分为两种情况&#xff1a; (1) 不需要后台验证&#xff0c;可以直接在前台访问且操作。通过方法找到编辑器&#x…

java学习笔记之条件语句(if...else)

条件语句用于基于不同的条件来执行不同的动作。 通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。 在 JavaScript 中,我们可使用以下条件语句: if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码if...else 语句 …

iOS 学习之NSPredicate

电话号码验证表达式 (BOOL)validateMobile:(NSString *)mobileNum { /** * 手机号码 * 移动&#xff1a;134[0-8],135,136,137,138,139,150,151,157,158,159,182,187,188 * 联通&#xff1a;130,131,132,152,155,156,185,186 * 电信&#xff1a;133,1349,153,180,189 */ NSStr…