一文看懂如何简单实现节流函数和防抖函数
前言
在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。今天自己翻阅了一些资料之后，来简单的谈谈我对节流函数和防抖函数的理解，希望能帮助大家理解；
节流函数
顾名思义，就是节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案；
举个例子：一个水龙头一直在滴水，可能一次性会滴很多水，但是我们想控制它的频率 ，让它每1000毫秒滴一滴水，这个时候我们就可以用到节流函数来进行控制（简单可以理解为类似于周期性定时器）
js代码（可直接复制到编辑器上看效果）：
//首先定义一个全局变量
var canRun = true;
//当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
window.onresize = function(){
// 取反，canRun为false的情况下
if(!canRun){
//直接return，后面的代码不执行
return
}
//走到这来就是canRun为true的情况，然后进行赋值为false
canRun = false
//设置一个定时器进行轮询操作
setTimeout( function () {
//这是要做的事情
console.log("函数节流")
//最后记得重新赋值true继续让他取反
canRun = true
//每隔1000毫秒也就是1秒钟就执行一次
}, 1000)
}
效果图如下：
防抖函数
防抖函数和节流函数很类似，但是稍有区别，防抖函数的定义是当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟；简单理解为（如果事件不触发即不执行，并且只会执行一次，就是定时器最后走的那一次）
举个例子：假如有个弹簧，你一直往下按压只要你不松手就是不会弹出的，弹簧只有在你松手的那一瞬间才会弹出去；防抖函数也是如此，只要事情触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次；
js代码（可直接复制到编辑器上看效果）：
//定义方法即要做的事情
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));
效果图如下：
总结：
1.防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案；
2.防抖函数只会执行一次，且是最后触发的那一次，而节流函数会规律性的执行多次；
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。
相关推荐
-
JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发. 这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢.浏览器卡死等).所以通常来讲我们会给相应事件添加延迟执行的逻辑. 通
-
javascript防抖函数debounce详解
定义及解读 防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次.假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时. 举一个小例子:假定在做公交车时,司机需等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时,重新等待 1 分钟再关门,如果后续 1 分钟内都没有乘客上车,司机会认为乘客都上来了,将关门发车. 此
-
详解JavaScript节流函数中的Throttle
首先我们来了解下什么是Throttle 1. 定义 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出. 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期. 接口定义: * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay * @param delay {number} 延迟时间,单位毫秒 * @param action {function} 请求关联函数,实际应用需要调用的函数 *
-
一文看懂如何简单实现节流函数和防抖函数
前言 在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会
-
一文看懂JAVA设计模式之工厂模式
工厂顾名思义就是创建产品,根据产品是具体产品还是具体工厂可分为简单工厂模式和工厂方法模式,根据工厂的抽象程度可分为工厂方法模式和抽象工厂模式.该模式用于封装和管理对象的创建,是一种创建型模式.本文从一个具体的例子逐步深入分析,来体会三种工厂模式的应用场景和利弊. 1. 简单工厂模式 该模式对对象创建管理方式最为简单,因为其仅仅简单的对不同类对象的创建进行了一层薄薄的封装.该模式通过向工厂传递类型来指定要创建的对象,其UML类图如下: 下面我们使用手机生产来讲解该模式: Phone类:手机标准规范
-
一文看懂JSONP原理和应用
目录 什么是JSONP JSONP原理 JSONP具体实现 1.ajax中如果进行跨域请求会如何 2.使用JSONP,将前端代码中的ajax请求去掉 3.将前端代码再进行修改 4.最后jQuery提供了方便使用JSONP的方式 什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输. 那么JSONP是什么呢? 首先抛出浏览
-
一文看懂PHP进程管理器php-fpm
php-fpm是什么 php-fpm是PHP的一个进程管理器.php下面的众多work进程皆有php-fpm进程管理器管理. php-fpm的工作原理 php-fpm全名是PHP FastCGI进程管理器.php-fpm启动后会先读php.ini,然后再读相应的conf配置文件,conf配置可以覆盖php.ini的配置. 启动php-fpm之后,会创建一个master进程,监听9000端口(可配置),master进程又会根据fpm.conf/www.conf去创建若干子进程,子进程用于处理实际的
-
简单实现节流函数和防抖函数过程解析
在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会滴很多
-
一文搞懂Python的hasattr()、getattr()、setattr() 函数用法
目录 hasattr() getattr() setattr() hasattr() hasattr() 函数用来判断某个类实例对象是否包含指定名称的属性或方法.该函数的语法格式如下: hasattr(obj, name) 其中 obj 指的是某个类的实例对象,name 表示指定的属性名或方法名,返回BOOL值,有name特性返回True, 否则返回False. 例子: class demo: def __init__ (self): self.name = "lily" def sa
-
一文看懂springboot实现短信服务功能
前言 上一篇讲了springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所以我这个脚手架也打算将短息服务继承进来. 短息服务我使用的平台是阿里云的.网上有很多的短信服务提供商.大家可以根据自己的需求进行选择. 准备工作 在阿里云上开通服务,以及进行配置.这些阿里云官方文档都写的很清楚,怎么做就不细说的,大家可以参考一下这篇文章: https://www.jb51.net/a
-
一文看懂C#中List的扩容机制
一:背景 1. 讲故事 在前一篇大内存排查中,我们看到了Dictionary正在做扩容操作,当时这个字典的count=251w,你把字典玩的66飞起,其实都是底层为你负重前行,比如其中的扩容机制,当你遇到几百万甚至千万的大集合这个扩容机制还真的需要挖一下,免的入戏太深,难以自拔. 二:List扩容机制 1. 如何查看 要想看它的扩容机制,可以用ILSpy去看看List的源码即可,非常简单. 从源码的 int num = (_items.Length == 0) ? 4 : (_items.Len
-
一文搞懂Python中pandas透视表pivot_table功能详解
目录 一.概述 1.1 什么是透视表? 1.2 为什么要使用pivot_table? 二.如何使用pivot_table 2.1 读取数据 2.2Index 2.3Values 2.4Aggfunc 2.5Columns 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表? 透视表是一种可以对数据动态排布并且分类汇总的表格格式.或许大多数人都在Excel使用过数据透视表,也体会到它的强大功能,而在pandas中它被称作pivot_table. 1.2 为什么要使用
-
一文搞懂Python中pandas透视表pivot_table功能
目录 一.概述 1.1 什么是透视表? 1.2 为什么要使用pivot_table? 二.如何使用pivot_table 2.1 读取数据 2.2Index 2.3Values 2.4Aggfunc 2.5Columns 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表? 透视表是一种可以对数据动态排布并且分类汇总的表格格式.或许大多数人都在Excel使用过数据透视表,也体会到它的强大功能,而在pandas中它被称作pivot_table. 1.2 为什么要使用