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


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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
javascript控制台详解
Jun 25 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
学习Angularjs分页指令
Jul 01 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JavaScript onclick事件使用方法详解
May 15 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
php仿ZOL分页类代码
2008/10/02 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
js完美的div拖拽实例代码
2014/01/22 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
快速排序的四种python实现(推荐)
2019/04/03 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python可以用哪些数据库
2020/06/22 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
计算机专业毕业生自我鉴定
2014/01/16 职场文书
创业女性典型材料
2014/05/02 职场文书
应届大学生自荐书
2014/06/17 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
地震慰问信
2015/02/14 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书