简单实现节流函数和防抖函数过程解析


Posted in Javascript onOctober 08, 2019

在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 #Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 #Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 #Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 #Javascript
新手入门js闭包学习过程解析
Oct 08 #Javascript
关于JSON解析的实现过程解析
Oct 08 #Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
js function定义函数使用心得
2010/04/15 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
python encode和decode的妙用
2009/09/02 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
毕业生实习证明
2014/09/19 职场文书
培训感想范文
2015/08/07 职场文书