详解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代码(站点及虚拟目录)
Oct 20 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
前端面试知识点目录一览
Apr 15 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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
短波收音机简介
2021/03/01 无线电
建立文件交换功能的脚本(三)
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JS跨域代码片段
2012/08/30 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
js document.write()使用介绍
2014/02/21 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python 通配符删除文件的实例
2018/04/24 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python编写简单端口扫描器
2019/09/04 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
材料加工硕士生求职信
2013/10/10 职场文书
生产主管岗位职责
2013/11/10 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
公务员考察材料范文
2014/12/23 职场文书
党员公开承诺书2015
2015/01/21 职场文书
大学生逃课检讨书
2015/05/04 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
实习报告范文
2019/07/30 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
nginx内存池源码解析
2021/11/20 Servers