虾扯蛋之函数防抖和节流

背景

    今天在coding的时候,做了一个搜索框,也正是这个搜索框,让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢?其实很简单,其实很无奈,就是我用王者的手速把他的接口访问崩了!

    我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove,resize,onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了!

函数防抖(debounce)

    什么是防抖?短时间内多次触发同一个事件,只执行最后一次,或者只在开始时执行,中间不执行。举个栗子:你去乘坐公交车,不停地上人,连续上人的过程中司机师傅是不会开车的,只有当最后一个人上车了,老司机才会开车!嘿嘿嘿!我们以不停地触发onmousemove事件,让数字 1为例。代码如下:

  • 不使用防抖和节流,数字会像得了羊癫疯一样不停地增长
//变量初始化
var xcd = document.getElementById('xcd'),count = 1; 
//要执行的操作 数字 1
function doSomething() {xcd.innerHTML = count  ;
};
//触发onmousemove事件 正常情况下
xcd.onmousemove = doSomething;

  • 使用防抖之绿色基础版
//绿色基础版:
function debounce(doSomething,wait){var timeout;//需要一个外部变量,为增强封装,所以使用闭包return function(){var _this = this,_arguments = arguments;//arguments中存着eclearTimeout(timeout);timeout = setTimeout(function(){doSomething.apply(_this,_arguments);   },wait);}
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000);

    这个绿色基础版虽然简单,但是已经能够解决大部分需求场景了,没有啥特殊需求使用这个版本就行了!用起来简直像吃了巴豆一样,duangduangduang,极其通畅!But,还会有一些其他需求,比如我想立即执行,就是连续触发事件的开始时立即执行一次,后连续触发不执行,我们用isImmediate表示是否立即执行,代码如下:

  • 使用防抖之立即执行版
//立即执行版
function debounce(doSomething,wait,isImmediate){var timeout;return function(){var _this = this,_arguments = arguments;clearTimeout(timeout);if(isImmediate){var isTrigger = !timeout;timeout = setTimeout(function(){timeout = null;}, wait)isTrigger&&doSomething.apply(_this,_arguments);}else{timeout = setTimeout(function(){doSomething.apply(_this,_arguments);   },wait);}}
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000,true);

函数节流(throttle)

    什么是节流?节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率,比如每间隔1秒钟,只会执行一次函数,无论这1秒钟内触发了多少次事件。

    举个栗子:你每天要喝好多水,但是你不会每喝完一口水都要去一次厕所,如果有盆友是酱紫的话,我劝你还是去医院看看吧→_→厕所看你都烦~你虽然一直在喝水,但是不会一直去厕所,通常的节奏是!喝水喝水喝水上厕所!喝水喝水喝水上厕所!虽然一直在触发,但是每隔一段时间只会执行一次操作,这就是函数节流!

  • 使用节流之时间戳版
//绿色基础版之时间戳版
function throttle(doSomething,wait){var _this,_arguments,initTime = 0;return function(){var now =  new Date();//将new date()转化为时间戳_this = this;_arguments = arguments;if(now - initTime>wait){doSomething.apply(_this,_arguments);initTime = now;}}
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);

  • 使用节流之定时器版
//绿色基础版之定时器版
function throttle(doSomething,wait){var timeout;return function(){var _this = this;_arguments = arguments;if(!timeout){timeout = setTimeout(function(){timeout = null;doSomething.apply(_this,_arguments);},wait);};}
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);

    同样,以上两个节流的绿色基础版也可以满足大多数需求场景啦!这两个版本有什么区别呢?时间戳版会在开始时立即执行一次,最后时间间隔内不再执行;定时器版开始时不执行,最后时间间隔内再执行一次。可以根据自己的实际需求选择合适的版本。

    当然,可能还有一些BT的产品会问你,能不能先立即执行一次,中间固定间隔时间执行,最后在执行一次呢?这就到了装B的时候了。像我这么牛X的前端,必须的啊,把两种合在一起就行了,双修什么的最喜欢了*@ο@*

  • 使用节流之双剑合璧版
//节流之双剑合璧版
function throttle(doSomething, wait) {var timeout, _this, _arguments,previous = 0;var later = function() {previous =  new Date();timeout = null;doSomething.apply(_this, _arguments)};var throttled = function() {var now =  new Date();//下次触发 doSomething 剩余的时间var remaining = wait - (now - previous),_this = this;_arguments = arguments;// 如果没有剩余的时间了if (remaining <= 0) {if (timeout) {clearTimeout(timeout);timeout = null;}previous = now;doSomething.apply(_this, _arguments);} else if (!timeout) {timeout = setTimeout(later, remaining);}};return throttled;
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);

深入理解函数防抖和节流,合理选择防抖或节流,能解决很多帕金森疾病,实乃出门旅行,居家生活之必备良品!OK就酱,我就是我,我瞅自己都上火!不定期分享一些前端知识点和面试点,喜欢点波关注呗!

参考:https://github.com/mqyqingfeng/Blog

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

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

相关文章

四川省内二本计算机公立好的大学排名,四川有哪些二本院校是公立的?附四川省公立二本大学排名及分数线...

选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>四川省内的公办大学一直以来都是历年高考生及家长关注的重点&#xff0c;本篇文章我将针对“四川省有多少所二本公立大学&#xff1f;有哪四川省内的公办大学一直以来都是历年高考生及…

NetBeans 7.4 Beta提示警告无效的异常处理

有许多例子说明Java异常处理可能比首次出现时要困难得多&#xff0c;Josh Bloch专门将一整章的《 Effective Java》 &#xff08;两个版本&#xff09;专门用于异常处理。 Java中的检查异常模型 仍然 “ 有争议” 。 我很高兴看到我最近下载的NetBeans 7.4 beta有一些提示&…

平心静气

昨天做一个功能的时候需要修改ofbiz代码,增加关联的表和查询字段,本以为很简单,照着写一下就好了,但是一直报错.临近下班,苦思冥想没有找到原因,八点左右不得已回家了. 第二天早上半个小时搞定.关键还是要平心静气,其实只是一个大小写的问题,由于大小写不匹配,没有匹配到对应的…

mysql5.7.17解压版安装_Windows中 MySQL5.7.17解压版安装步骤

1、先去MySQL官网下载。当前最新版是5.7.19&#xff0c;可能安装方法不同了&#xff0c;本人测试没有安装成功&#xff0c;若有安装成功的朋友&#xff0c;希望分享一下安装步骤。2、将下载的压缩包解压出来&#xff0c;然后在“MySQL解压目录”中新建“data”文件夹。如下图&a…

大学计算机结课论文怎么写,大学本科计算机论文格式_大学本科计算机毕业论文范文...

导读&#xff1a;如何撰写出满意的大学本科计算机论文是现在很多人都为之苦恼的问题之一&#xff0c;而论文的撰写也并非易事&#xff0c;必定是需要花费很多心思和汗水的&#xff0c;本论文分类为大学计算机论文&#xff0c;下面是小编为大家整理的几篇大学本科计算机论文范文…

关于Java和Scala同步的五件事你不知道

实际上&#xff0c;所有服务器应用程序都需要在多个线程之间进行某种同步。 大多数同步工作是在框架级别为我们完成的&#xff0c;例如通过我们的Web服务器&#xff0c;数据库客户端或消息传递框架。 Java和Scala提供了许多组件来编写可靠的多线程应用程序。 这些包括对象池&am…

Keepalived详解之 - LVS(IPVS)管理工具ipvsadm使用指南

ipvsadm是什么? ipvsadm是用来配置、维护或者查看Linux内核当中virtual server table的一个工具, LVS(Linux virtual server)能基于一个集群当中的两个或者多个节点来创建弹性网络服务, 集群中的处于激活状态的节点能将服务请求重定向到一组实际提供服务的主机当中, 提供包括T…

精读《你不知道的javascript》中卷

前言 《你不知道的 javascript》是一个前端学习必读的系列&#xff0c;让不求甚解的JavaScript开发者迎难而上&#xff0c;深入语言内部&#xff0c;弄清楚JavaScript每一个零部件的用途。本书《你不知道的javascript》中卷介绍了该系列的两个主题&#xff1a;“类型和语法”以…

mysql触发器区分新增 修改_MySQL触发器 , 判断更新操作前后数据是否改变

改动表为user , 改动后将部分信息写入cfq_tab表1. 新增触发器create TRIGGER cfq_on_user_addafter insert on userfor each ROWBEGINinsert into cfq_tab(id,type_id,type,status) values (null,new.UID,1,0);end;2. 修改触发器 , 判断修改前后数据是否变动//DROP TRIGGER IF…

三年级计算机课画曲线,三年级上册信息技术曲线工具教案

教材分析《嬉戏山水间—曲线工具》本课教学时间一课时&#xff0c;主要内容是学习在Windows下学会画图软件中“曲线”工具的使用方法。根据教材的编排&#xff0c;本课之前&#xff0c;学生已学会了画图软件中椭圆和直线工具、多边形工具的使用&#xff0c;已经具备了画图软件的…

如何使用不同的记录器实现配置SLF4J

将slf4j库用作Java应用程序日志记录API层有很多好处。 在这里&#xff0c;我将展示一些示例&#xff0c;说明如何与不同的记录器一起使用和配置它。 您可以将slf4j视为Java接口&#xff0c;然后在运行时需要一个实现&#xff08;仅一个&#xff09;来提供实际的日志记录详细信…

Presto 学习

Presto 基础知识与概念学习可以参考这些博客&#xff1a; presto 0.166概述 https://www.cnblogs.com/sorco/p/7060166.html Presto学习-presto介绍 https://blog.csdn.net/paicMis/article/details/78516475 Presto必知必会 https://blog.csdn.net/jiangshouzhuang/article/de…

4月24号

今天老师讲了好多理论&#xff0c;首先讲了一个程序运行多次就是多个进程&#xff0c; from multiprocessing import Processimport time import osdef task(): print(%s:父进程%s%(os.getpid(),os.getppid())) time.sleep(3)if __name____main__: pProcess(targettas…

撸个微信小程序的省市区选择器

起因 微信小程序虽然已经有现成的封装好的省市区选择器给开发者使用&#xff0c;然鹅不幸的是&#xff0c;微信地址库的数据和公司用的地址库数据很难一一对上&#xff0c;那就只能撸起袖子自己写个组件了。 最终效果 思维导图 主要代码 组件 region-picker.js /* region-pic…

docker build 变量_DockerFile 设置环境变量

镜像的Layer 在docker docs里面有一句话: We’ve already seen that Docker images are read-only templates from which Docker containers are launched. Each image consists of a series of layers. Docker makes use of union file systems to combine these layers into…

计算机巧用剪纸做画册教案,大班绘画剪纸制作的教案总结

大班绘画剪纸制作的教案总结第一篇&#xff1a;写生画&#xff1a;目标&#xff1a;培养幼儿细微的观察能力&#xff0c;进一步引导幼儿能抓住人物的典型特征&#xff0c;大胆表现。准备&#xff1a;不同脸型人物的范画两张。过程&#xff1a;一、导入。1&#xff0e; 组织游戏…

python之路_day6

本节内容&#xff1a;面向对象编程介绍为什么要用面向对象进行开发&#xff1f;面向对象的特性&#xff1a;封装、继承、多态类、方法、引子 你现在是一家游戏公司的开发人员&#xff0c;现在需要你开发一款叫做<人狗大战>的游戏&#xff0c;你就思考呀&#xff0c;人狗作…

Netty 简介

上文我们介绍了NIO和BIO的区别&#xff0c;NIO相对于BIO是一次很大的进步。但我们平时开发中并不会使用NIO。这是因为NIO在开发中存在以下问题 NIO的类库和API繁杂&#xff0c;使用麻烦&#xff0c;需要熟练掌握Selector、ServerSocketChannel、SocketChannel、ByteBuffer等&am…

简单性与鲁棒性–在锁定文件处理中展示

今天&#xff0c;我们将讨论在设计不足和过度设计之间保持简单&#xff0c;愚蠢&#xff08;KISS&#xff09;和鲁棒性的设计价值之间的冲突。 我们正在编写一个批处理Java应用程序&#xff0c;需要确保在服务器上一次最多运行一个实例。 一个团队成员有一个很好的想法&#x…

mssql导出数据到mysql_MSSQL数据导出到MYSQL

MSSQL数据导出到MYSQL花了一天时间把MSSQL里的数据导出到MYSQL&#xff0c; 好麻烦&#xff0c;二个数据库都是阿里云买的云服务器。先上阿里云控制面板&#xff0c;备份下MSSQL数据库&#xff0c;下载备份下来&#xff0c;在本地电脑上还原2.本地MSSQL数据库上执行select * in…