详解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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
Smarty安装配置方法
2008/04/10 PHP
实例讲解PHP表单
2020/06/10 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
深入理解Python变量与常量
2016/06/02 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
环保项目建议书
2014/08/26 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
西柏坡观后感
2015/06/08 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python