JS中的防抖与节流及作用详解


Posted in Javascript onApril 01, 2019

概念

函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

下面通过示例代码看下防抖和节流。

什么是防抖?and什么是节流?一起来开心的学习下吧。

首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次。举个例子,当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6,那这样是不是轻松多了。ok,解释清楚了那么就来看下代码,更加清晰。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防抖</title>
</head>
<body>
 <button id="debounce">防抖,防抖,防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
 obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
 }

 //防抖函数
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定时器
  timer = setTimeout(function(){ //如果不存在那么就开启定时器
   fn.call(this,arguments);
  },300)
  }
 }

 //执行函数
 function debounce() {
  console.log('防抖,防抖,防抖');
 }
 </script>
</body>
</html>

上面函数也就是在300毫秒内,只会触发一次事件。总结:防抖就是在任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

接下来什么是节流,假如在一个页面中有任意多张图片,那么就有可能会使用懒加载技术,懒加载呢就是监听滚动条的位置,那么如果用户一直在滚动,那么事件监听就一直在触发,也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说,先看代码。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>节流</title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>节流,节流,节流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
 }

 //节流函数
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 声明一个变量标志做判断
  return function () {
   if (!booleanVal) {
   return 
   } //如果事件正在执行,那么就返回,将布尔值改为false
   booleanVal = false;
   //事件未执行,创建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件执行完将布尔值改回
   },300)
  }
 }

 //执行函数
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>

这样,在某些特定的工作场景,我们就可以使用防抖与节流来减少不必要的损耗。最后提一个问题,上句提到造成不必要的损耗,那么请问是什么损耗呢?

总结

以上所述是小编给大家介绍的JS中的防抖与节流及作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
悬浮数字的实现案例
Feb 19 Javascript
Express.JS使用详解
Jul 17 Javascript
初识Node.js
Mar 20 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
微信小程序 slot踩坑的解决
Apr 01 #Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
详解JavaScript中的函数、对象
Apr 01 #Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 #Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 #Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 #Javascript
You might like
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python如何删除列为空的行
2020/07/17 Python
Python实现一个优先级队列的方法
2020/07/31 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
MIS软件工程师的面试题
2016/04/22 面试题
改作风抓落实促发展心得体会
2014/09/10 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
股份转让协议书范本
2015/01/27 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery