详解JS函数防抖


Posted in Javascript onJune 05, 2020

一、什么是函数防抖

       概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

       举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒。在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,“函数防抖”的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动作

二、为什么需要函数防抖

前端开发过程中,有一些事件,常见的例如,onresize,scroll,mousemove ,mousehover 等,会被频繁触发(短时间内多次触发),不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

       除此之外,短时间内重复的 ajax 调用不仅会造成数据关系的混乱,还会造成网络拥塞,增加服务器压力,显然这个问题也是需要解决的。

三、函数防抖如何解决上述问题

       根据上面对问题的分析,细细思索,可以想到如下解决方案。

       函数防抖的要点,是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。如果方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。

四、函数防抖的代码实现

       根据以上分析,我们对 “函数防抖” 来进行简单的代码实现,如下:

function debounce(fn,wait){
 var timer = null;
 return function(){
  if(timer !== null){
   clearTimeout(timer);
  }
  timer = setTimeout(fn,wait);
 }
}
 
function handle(){
 console.log(Math.random());
}
 
window.addEventListener("resize",debounce(handle,1000));

五、函数节流的使用场景

       函数防抖一般用在什么情况之下呢?一般用在,连续的事件只需触发一次回调的场合。具体有:

       搜索框搜索输入。只需用户最后一次输入完,再发送请求;

       用户名、手机号、邮箱输入验证;

       浏览器窗口大小改变后,只需窗口调整完后,再执行 resize 事件中的代码,防止重复渲染。

       目前遇到过的用处就是这些,理解了原理与实现思路,小伙伴可以把它运用在任何需要的场合,提高代码质量。

总结

       函数防抖其实是分为 “立即执行版” 和 “非立即执行版” 的,根据字面意思就可以发现他们的差别,所谓立即执行版就是 触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 而 “非立即执行版” 指的是 触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。。

       在开发过程中,我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数,一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来,实现最终的双剑合璧版本的防抖函数,以下为小伙伴们做了简单的实现:

/**
* @desc 函数防抖---“立即执行版本” 和 “非立即执行版本” 的组合版本
* @param func 需要执行的函数
* @param wait 延迟执行时间(毫秒)
* @param immediate---true 表立即执行,false 表非立即执行
**/
function debounce(func,wait,immediate) {
let timer;

return function () {
let context = this;
let args = arguments;

if (timer) clearTimeout(timer);
if (immediate) {
var callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timer = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}

function handle(){
console.log(Math.random());
}

// window.addEventListener("mousemove",debounce(handle,1000,true)); // 调用立即执行版本
window.addEventListener("mousemove",debounce(handle,1000,false)); // 调用非立即执行版本

以上就是详解JS函数防抖的详细内容,更多关于JS函数防抖的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
使用javascript获取页面名称
Dec 23 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Js apply方法详解
Feb 16 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vuex的各个模块封装的实现
Jun 05 #Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 #Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 #Javascript
vscode 插件开发 + vue的操作方法
Jun 05 #Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python实现验证码识别功能
2018/06/07 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用python模拟命令行终端的示例
2019/08/13 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python多线程使用方法实例详解
2019/12/30 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
食堂个人先进事迹
2014/01/22 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
导游词之无锡东林书院
2019/12/11 职场文书